React BFF

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "esmodules": true
+        }
+        //"browserslist": "> 0.25%, not dead"
+      }
+  ],
+    "@babel/preset-react", 
+    "@babel/preset-typescript"
+  ]
+}

.eslintignore

@@ -0,0 +1,10 @@
+dist
+node_modules
+config
+docs
+backup
+bin
+tests
+examples
+*.js
+src

.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "root": true,
+  "extends": "airbnb-typescript",
+  "env": {
+    "node": true,
+    "es6": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 2015,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "warn",
+    "no-console": "off",
+    "no-undef": "warn"
+  }
+}

.gitignore

@@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+/dist/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln

config/webpack.development.js

@@ -0,0 +1,60 @@
+/*
+ * @Author: your name
+ * @Date: 2020-11-07 17:35:02
+ * @LastEditTime: 2020-11-15 15:26:55
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /my-vip/config/webpack.development.js
+ */
+const { resolve, join } = require('path');
+const htmlWebpackPlugin = require('html-webpack-plugin');
+const friendlyErrorsPlugin = require('friendly-errors-webpack-plugin'); // 识别某些类别的webpack错误，并清理，聚合和优先级，以提供更好的开发人员体验
+const  notifier = require('node-notifier');
+const ICON = join(__dirname, 'icon.png');
+
+module.exports = {
+    devServer:{
+        stats: "errors-only",
+        open: false,
+        // quiet: true, // webpack的错误或警告是不可见的。
+        historyApiFallback: true, // 使用HTML5历史记录API时，index.html可能必须在该页面上代替任何404响应。
+        inline: true, //改动后是否自动刷新
+        proxy:{
+            '/api': {
+                target: 'http://localhost:3000',
+                pathRewrite: {
+                    '^/api': '/api'
+                }
+            }
+        },
+        port: 8082,
+        hot: true, // 启用模块热更新
+        watchContentBase: true, // 默认情况下是禁用的。启用后，文件更改将触发整个页面重新加载。
+    },
+    plugins: [
+        new friendlyErrorsPlugin({
+            compilationSuccessInfo:{
+                message:['You application is running here'],
+                notes:['Project is running at http://localhost:8082/'],
+            },
+            clearConsole:true,
+            onErrors: function(serverity, errors){
+                if(serverity !== 'error'){
+                    return;
+                }
+                const error = errors[0];
+                notifier.notify({
+                    title: 'webpack error',
+                    message: serverity + ':' + error.name,
+                    subtitle: error.file || '',
+                    icon: ICON 
+                })
+            }
+        }),
+        new htmlWebpackPlugin({
+            template: resolve(__dirname, '../src','./web/index-dev.html'),
+            filename: "index.html",
+            inject: true
+        })
+    ]
+}

config/webpack.production.js

@@ -0,0 +1,92 @@
+/*
+ * @Author: your name
+ * @Date: 2020-11-07 17:35:06
+ * @LastEditTime: 2020-11-15 15:28:25
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /my-vip/config/webpack.production.js
+ */
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin');
+
+module.exports = {
+  output: {
+    path: path.join(__dirname,'../dist/assets'),
+    assetModuleFilename: 'scripts/[name].[contenthash:5].bundule.[ext]',
+    filename: 'scripts/[name].[contenthash:5].bundule.js',
+  },
+//   externals: {
+//     react: "React",
+//     "react-router-dom": "ReactRouterDOM"
+//   },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({
+        parallel: true, // 是否并行打包
+      })
+    ],
+    runtimeChunk: {
+      name: "runtime"
+    },
+    splitChunks: {
+      chunks: "async",
+      minChunks: 1,
+      maxAsyncRequests: 5,
+      // maxSize: 300000,
+      maxInitialRequests: 3,
+      name: false,
+      cacheGroups: {
+        commons: {
+          chunks: "initial",
+          minChunks: 2,
+          maxInitialRequests: 5,
+          // minSize: 0,
+          name: "commons"
+        }
+      },
+      //最小的文件大小 超过之后将不予打包
+      minSize: {
+        javascript: 100000,
+        style: 100000
+      },
+      //最大的文件 超过之后继续拆分
+      maxSize: {
+        javascript: 300000, //故意写小的效果更明显
+        style: 300000
+      }
+    }
+  },
+  plugins: [
+    new CleanWebpackPlugin(),
+    new OptimizeCSSAssetsPlugin({
+      assetNameRegExp: /\.css$/g,
+      cssProcessor: require('cssnano'),
+      cssProcessorPluginOptions: {
+        preset: [
+          'default',
+          {
+            discardComments: {
+              removeAll: true,
+            },
+          },
+        ],
+      },
+      canPrint: true,
+    }),
+    new HtmlWebpackPlugin({
+      template: path.resolve(__dirname, "../src", "./web/index-prod.html"),
+      filename: "../views/index.html",
+      inject: true,
+      minify: {
+        minifyJS: true,
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true,
+      },
+    })
+  ]
+};

gulpfile.js

@@ -0,0 +1,65 @@
+/*
+ * @Author: your name
+ * @Date: 2020-11-14 19:04:09
+ * @LastEditTime: 2020-11-14 19:14:30
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /my-vip/gulpfile.js
+ */
+const gulp = require('gulp');
+const watch = require('gulp-watch');
+const babel = require('gulp-babel');
+const eslint = require('gulp-eslint');
+const babelConfig = {
+  presets: ['@babel/preset-typescript'],
+  plugins: [
+    [
+      '@babel/plugin-proposal-decorators',
+      {
+        legacy: true,
+      },
+    ],
+    '@babel/plugin-transform-modules-commonjs',
+  ],
+};
+//上线环境
+function buildprod() {
+  return gulp
+    .src(entry)
+    .pipe(
+      babel({
+        babelrc: false,
+        ignore: cleanEntry,
+        ...babelConfig,
+      })
+    )
+    .pipe(gulp.dest('dist'));
+}
+function buildlint() {
+  return gulp
+    .src(entry)
+    .pipe(eslint())
+    .pipe(eslint.format())
+    .pipe(eslint.failAfterError());
+}
+function builddev() {
+  //开发环境整体拷贝
+  const _entry = 'src/server/**/*';
+  return watch(
+    _entry,
+    {
+      ignoreInitial: false,
+    },
+    function() {
+      gulp.src(_entry).pipe(gulp.dest('dist'));
+    }
+  );
+}
+let build = gulp.series(builddev);
+if (process.env.NODE_ENV == 'production') {
+  build = gulp.series(buildprod, buildconfig);
+}
+if (process.env.NODE_ENV == 'lint') {
+  build = gulp.series(buildlint);
+}
+gulp.task('default', build);

jest.config.js

@@ -0,0 +1,43 @@
+/*
+ * @Author: your name
+ * @Date: 2020-11-14 16:53:01
+ * @LastEditTime: 2020-11-14 23:01:21
+ * @LastEditors: Please set LastEditors
+ * @Description: In User Settings Edit
+ * @FilePath: /my-vip/jest.config.js
+ */
+
+module.exports = {
+  //设置识别哪些文件是测试文件（glob形式），与testRegex互斥，不能同时写
+  //"**/tests/**/*.ts?(x)",
+  testMatch: ["**/?(*.)(spec|test).ts?(x)"],
+  //设置识别哪些文件是测试文件（正则形式），与testMatch互斥，不能同时写
+  //testRegex: '(/__tests__).*|(\\.|/)(test|spec))\\.jsx?$',
+  //测试环境，默认值是：jsdom，可修改为node
+  testEnvironment: "jsdom",
+  rootDir: "", //默认值：当前目录，一般是package.json所在的目录。
+  transform: {
+    ".(ts|tsx)": "ts-jest",
+    ".(js|jsx)": "babel-jest"
+  },
+  moduleNameMapper: {
+    "^@components(.*)$": "<rootDir>/src/web/components$1",
+    "^@utils(.*)$": "<rootDir>/src/web/utils$1",
+    ".(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/mock/fileMock.js",
+    ".(css|less)$": "<rootDir>/tests/mock/styleMock.js"
+  },
+  coverageThreshold: {
+    global: {
+      branches: 50,
+      functions: 95,
+      lines: 95,
+      statements: 95
+    }
+  },
+  preset: "jest-puppeteer",
+  collectCoverage: true,
+  coverageDirectory: "./docs/jest-coverage",
+  coverageReporters: ["json", "html"],
+  coveragePathIgnorePatterns: ["/node_modules/", "/tests/"],
+  moduleFileExtensions: ["ts", "tsx", "js", "json", "jsx", "node"] //测试文件的类型
+};