framework-for-react 1.0.1

package/README.md

@@ -0,0 +1,79 @@
+# framework-for-react
+
+#### 介绍
+framework-for-react
+
+
+#### 安装教程
+
+1.  npm install -D framework-for-react
+
+#### 使用说明
+
+1. 这是一个针对react18，使用webpack5进行打包的简洁工具包，包含babel预置v7，各种预置loader，react-router等工具，开箱即用
+2. 使用示例
+```
+*** dev.js ***
+const { webpackConfig, devServerConfig, startServer } = require('framework-for-react');
+// modify loader, eg: jsx-loader
+webpackConfig.module.rules.forEach(i => {
+  if (i.test.toString() == /\.jsx?$/) {
+    // todo vue
+  }
+});
+// copywebpack plugin
+webpackConfig.plugins.push(
+  new CopyWebpackPlugin({
+    patterns: [
+      { from: 'xxx', to: 'xxx' },
+    ]
+  })
+);
+devServerConfig.port = '8080';
+devServerConfig.host = '127.0.0.1';
+devServerConfig.proxy = {
+  '/': {
+    target: 'http://x.xx.xxx/api', // 后端接口
+    secure: false, // 是否验证SSl证书
+    changeOrigin: true,
+    bypass: function(req, res, proxyOptions) {
+      console.log(proxyOptions.target, req.originalUrl)
+    }
+  }
+};
+
+// start dev server on host:port
+startServer(webpackConfig, devServerConfig);
+```
+
+```
+*** build.js ***
+const { webpackConfig } = require('framework-for-react');
+// modify loader, eg: vue-loader
+webpackConfig.module.rules.forEach(i => {
+  if (i.test.toString() == /\.vue$/) {
+    // todo vue
+  }
+});
+// copywebpack plugin
+webpackConfig.plugins.push(
+  new CopyWebpackPlugin({
+    patterns: [
+      { from: 'xxx', to: 'xxx' },
+    ]
+  })
+);
+module.exports = webpackConfig;
+```
+
+```
+*** package.json ***
+"script": {
+  "dev": "cross-env NODE_ENV=development node ./dev.js",
+  "build": "cross-env NODE_ENV=production webpack --config ./build.js",
+}
+```
+
+
+
+

package/babel.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  assumptions: {
+    privateFieldsAsProperties: true,
+    setPublicClassFields: true,
+  },
+  presets: ['@babel/preset-env', '@babel/preset-react'],
+  plugins: [
+    '@babel/plugin-transform-arrow-functions',
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-private-methods' /*, { loose: true }*/],
+    ['@babel/plugin-proposal-class-properties' /*, { loose: true }*/],
+    [
+      'babel-plugin-import',
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'lib',
+        style: 'css',
+      },
+    ],
+  ],
+  compact: false,
+};

package/index.js

@@ -0,0 +1,178 @@
+const path = require('path');
+const webpack = require('webpack');
+const WebpackDevServer = require('webpack-dev-server');
+const autoprefixer = require('autoprefixer');
+const htmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { GitRevisionPlugin } = require('git-revision-webpack-plugin');
+const gitRevision = new GitRevisionPlugin({ branch: true });
+
+// 定义当前工作目录
+const APP_PATH = path.resolve(process.cwd());
+const APP_SRC = path.join(APP_PATH, '/src');
+const APP_DIST = path.join(APP_PATH, '/dist');
+// framework 目录
+const dir_path = path.resolve(__dirname);
+
+const devMode = process.env.NODE_ENV !== 'production';
+
+const webpackConfig = {
+  devtool: devMode,
+  entry: {
+    app: [path.join(APP_SRC, '/main.js')],
+    vendors: [
+      '@babel/polyfill',
+      'react',
+      'react-dom',
+      'react-redux',
+      'react-router-dom',
+      'axios',
+      'react-intl',
+      'classnames'
+    ]
+  },
+  output: {
+    path: APP_DIST,
+    filename: '[name].[contenthash:8].js',
+    chunkFilename: '[name].[contenthash:8].js',
+  },
+  resolve: {
+    alias: {
+      React: 'react/index.js',
+      app_src: APP_SRC,
+      app_component: 'app_src/component',
+      app_view: 'app_src/view'
+    },
+    extensions: ['.js', '.json', '.jsx', '.scss', '.less', '.css']
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /^node_modules$/,
+        use: [
+          {
+            loader: path.resolve(process.cwd(), 'node_modules/babel-loader'),
+            options: {
+              configFile: path.resolve(dir_path, './babel.config.js'),
+              cacheDirectory: true
+            }
+          }
+        ]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: 'asset',
+        generator: {
+          filename: "images/[name]-[contenthash:8].[ext]",
+        }
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2)$/,
+        type: 'asset',
+        generator: {
+          filename: 'fonts/[name].[contenthash:8][ext]'
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
+      },
+      {
+        test: /\.less$/,
+        use: [
+          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          {
+            loader: 'less-loader',
+            options: {
+              lessOptions: {
+                strictMath: true,
+                noIeCompat: true
+              }
+            }
+          }
+        ]
+      }
+    ]
+  },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      minSize: 256 * 1024,
+      maxSize: 1280 * 1024
+    }
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: devMode ? 'css/[name].css' : 'css/[name].[contenthash:8].css',
+      chunkFilename: devMode ? 'css/[name].css' : 'css/[name].[contenthash:8].css'
+    }),
+    new htmlWebpackPlugin({
+      hash: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true
+      },
+      favicon: path.join(APP_SRC, '/asset/images/ico.ico'),
+      template: path.join(APP_SRC, '/template/index.html')
+    })
+  ]
+};
+
+try {
+  const ver = gitRevision.version();
+  console.log(ver);
+  webpackConfig.plugins.push(gitRevision);
+  webpackConfig.plugins.push(
+    new webpack.DefinePlugin({
+      __ENV__: JSON.stringify(process.env.NODE_ENV),
+      __TEST__: JSON.stringify(process.env.PROJ_TEST),
+      VERSION: JSON.stringify(gitRevision.version()),
+      COMMITHASH: JSON.stringify(gitRevision.commithash()),
+      BRANCH: JSON.stringify(gitRevision.branch())
+    })
+  );
+} catch(e) {
+  console.log('no git informations');
+  webpackConfig.plugins.push(
+    new webpack.DefinePlugin({
+      __ENV__: JSON.stringify(process.env.NODE_ENV),
+      __TEST__: JSON.stringify(process.env.PROJ_TEST),
+    })
+  );
+}
+
+const devServerConfig = {
+  hot: true,
+  host: '0.0.0.0',
+  port: '8080',
+  historyApiFallback: true,
+  compress: true,
+  allowedHosts: 'all',
+  proxy: { },
+};
+
+function startServer(config, devConfig) {
+  const compiler = webpack({
+    ...config,
+    devtool: 'eval-cheap-module-source-map',
+    mode: devMode ? 'development' : 'production',
+  });
+  const server = new WebpackDevServer(devConfig, compiler);
+  server.start().then(error => {
+    if (error) {
+      console.error(error);
+    } else {
+      console.info('%c Listening on http://%s:%s in your browser.', 'font-size: 18px; color: #e22;', devConfig.host, devConfig.port);
+    }
+  });
+}
+
+module.exports = {
+  webpackConfig,
+  devServerConfig,
+  startServer
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "framework-for-react",
+  "version": "1.0.1",
+  "description": "framework for react18",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "files": [
+    "index.js",
+    "babel.config.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/sky_yz/framework-for-react.git"
+  },
+  "keywords": [
+    "framework",
+    "react18",
+    "webpack5"
+  ],
+  "author": "yzh",
+  "license": "ISC",
+  "dependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-syntax-jsx": "^7.17.12",
+    "@babel/plugin-transform-runtime": "^7.18.5",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/runtime": "^7.18.3",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "classnames": "^2.3.1",
+    "copy-webpack-plugin": "^8.1.1",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.7.1",
+    "git-revision-webpack-plugin": "^5.0.0",
+    "html-webpack-plugin": "^4.5.2",
+    "less": "^4.1.3",
+    "less-loader": "^7.3.0",
+    "mini-css-extract-plugin": "^2.6.1",
+    "postcss": "^8.4.14",
+    "postcss-loader": "^7.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.4.0",
+    "react-redux": "^8.0.5",
+    "react-router-dom": "^6.10.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2",
+    "webpack-merge": "^5.8.0"
+  }
+}