fix

Author: xpioneer

.babelrc.js

@@ -0,0 +1,35 @@
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: '> 0.25%, not dead',
+        ignoreBrowserslistConfig: true,
+        useBuiltIns: false,
+        modules: false,
+        exclude: ['transform-typeof-symbol']
+      }
+    ],
+    '@babel/preset-react',
+    [
+      '@babel/preset-typescript',
+      {
+        isTSX: true,
+        allExtensions: true,
+        allowNamespaces: true,
+        allowDeclareFields: true
+      }
+    ]
+  ],
+  plugins: [
+    [
+      '@babel/plugin-proposal-decorators',
+      {legacy: true}
+    ],
+    [
+      '@babel/plugin-proposal-class-properties',
+      {loose: true}
+    ]
+  ]
+}

.browserslistrc

@@ -25,36 +25,46 @@ module.exports = {
     },
     'ecmaVersion': 2018,
     'sourceType': 'module',
-    // 'project': './tsconfig.json'
+    'project': './tsconfig.json'
   },
   'plugins': [
     'react',
-    '@typescript-eslint',
-    // 'prettier'
+    '@typescript-eslint'
   ],
   'rules': {
     'no-undef': 0,
-    // 'indent': [ 'error', 2 ],
-    'linebreak-style': [ 'error', 'unix' ],
-    'quotes': [ 'error', 'single' ],
-    'semi': [ 2, 'never' ],
-    'no-unused-vars': 'off',
+    'indent': 0,
+    'linebreak-style': [ 2, 'unix' ],
+    'quotes': 0,
+    'semi': 0,
+    'no-unused-vars': 0,
     'prefer-spread': 0,
     'prefer-const': 0,
     'switch-colon-spacing': [2, {'after': true, 'before': true}],
     'default-case': 2,
     'no-spaced-func': 2,
     'no-case-declarations': 0,
     'no-sparse-arrays': 0,
+    'space-before-function-paren': 0,
+    'keyword-spacing': 0,
+    'key-spacing': 2,
+    'comma-spacing': 0,
+    'space-before-blocks': 2,
+    'arrow-spacing': 2,
+    'semi-spacing': 2,
+    'no-irregular-whitespace': 2,
+    
     // react jsx
     'react/display-name': 0,
-    'react/jsx-filename-extension': 'off',
-    'react/jsx-first-prop-new-line': 'off',
-    'react/jsx-indent': [ 'error', 2 ],
+    'react/jsx-filename-extension': 0,
+    'react/jsx-first-prop-new-line': 0,
+    'react/jsx-indent': [ 2, 2 ],
     'react/jsx-indent-props': [2, 2],
     'react/prop-types': 0,
+    'react/jsx-key': 2,
 
-    // @typescript-eslint 
+    // @typescript-eslint
+    '@typescript-eslint/quotes': [2, 'single'],
     '@typescript-eslint/indent': [2, 2],
     '@typescript-eslint/camelcase': 0,
     '@typescript-eslint/explicit-function-return-type': 0,
@@ -67,9 +77,15 @@ module.exports = {
     '@typescript-eslint/no-angle-bracket-type-assertion': 0,
     '@typescript-eslint/interface-name-prefix': 0,
     '@typescript-eslint/no-empty-function': 1,
-    '@typescript-eslint/semi': 0,
+    '@typescript-eslint/semi': [2, 'never'],
     '@typescript-eslint/no-inferrable-types': 0,
     '@typescript-eslint/no-empty-interface': 0,
     '@typescript-eslint/class-name-casing': 0,
+    '@typescript-eslint/explicit-module-boundary-types': 0,
+    '@typescript-eslint/space-before-function-paren': [2],
+    '@typescript-eslint/keyword-spacing': 0,
+    '@typescript-eslint/comma-spacing': 2,
+    '@typescript-eslint/type-annotation-spacing': 2,
+    '@typescript-eslint/ban-types': 0
   }
-};
+}

.eslintrc.js

@@ -0,0 +1,24 @@
+
+module.exports = {
+  'extends': 'stylelint-config-standard',
+  'rules': {
+    'selector-list-comma-newline-after': 'never-multi-line',
+    'value-list-comma-newline-after': 'never-multi-line',
+    'selector-pseudo-class-no-unknown': null,
+    'declaration-colon-newline-after': null,
+    'no-descending-specificity': null,
+    'max-empty-lines': 2,
+    'at-rule-no-unknown': [true, {
+      ignoreAtRules: [/for|while|include/]
+    }]
+  },
+  ignoreFiles: [
+    'node_modules/**/*',
+    'public/**/*',
+    'dist/**/*',
+    '**/*.js',
+    '**/*.jsx',
+    '**/*.tsx',
+    '**/*.ts'
+  ]
+}

.stylelintrc.js

@@ -2,7 +2,7 @@
 
 ### 项目概况
 ***
-使用蚂蚁金服的Antd开发的一套后台管理系统，主要用到了react、typescript、antd、mobx等技术，使用webpack4打包构建，包含React16的code splitting等新特性。
+使用Ant-Design开发的一套后台管理系统，主要用到了React、Typescript、Mobx、PWA等技术，使用webpack5打包构建，包含React16的一些新特性。
 
 ### 项目主要技术结构
 
@@ -13,6 +13,7 @@
 * mobx
 * webpack4
 * react-router4
+* pwa
 
 ### 安装
 ***

README.md

@@ -7,14 +7,21 @@ const postcssLoader = {
   loader: 'postcss-loader',
   options: {
     sourceMap: _DEV_ ? true : false,
-    plugins: [
-      require('autoprefixer'),
-      // require('postcss-pxtorem')({
-      //   rootValue: 40,
-      //   propList: ['*'],
-      //   selectorBlackList: [/^\.(vux|weui)-[\w]*/]
-      // })
-    ]
+    postcssOptions: {
+      plugins: [
+        ['postcss-preset-env', {
+          browsers: '> 0.5%, not dead, iOS >= 7, Android >= 4.3'
+        }]
+      ]
+    },
+    // plugins: [
+    //   require('autoprefixer'),
+    //   // require('postcss-pxtorem')({
+    //   //   rootValue: 40,
+    //   //   propList: ['*'],
+    //   //   selectorBlackList: [/^\.(vux|weui)-[\w]*/]
+    //   // })
+    // ]
   }
 }
 

build/styleLoaderConf.js

@@ -3,8 +3,7 @@ const path = require('path'),
   styleRules = require('./styleLoaderConf'),
   CopyWebpackPlugin = require('copy-webpack-plugin'),
   MiniCssExtractPlugin = require("mini-css-extract-plugin"),
-  ManifestPlugin = require('webpack-manifest-plugin'),
-  SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+  {GenerateSW} = require('workbox-webpack-plugin');
 
 const DonePlugin = require('./donePlugin')
 const _PROD_ = process.env.NODE_ENV === 'production';
@@ -24,7 +23,7 @@ module.exports = {
     publicPath: '/', // root Dir
     sourceMapFilename: '[name].map',
     chunkFilename: 'static/js/[name].[chunkhash:8].js',
-    filename: 'static/js/[name].[hash:8].js'
+    filename: 'static/js/[name].[contenthash:8].js'
   },
 
   resolveLoader: {
@@ -84,15 +83,15 @@ module.exports = {
         test: /\.(eot|woff|woff2|ttf)(\?\S*)?$/,
         loader: "url-loader",
         options: {
-          name: "assets/fonts/[name].[hash:8].[ext]",
+          name: "assets/fonts/[name].[contenthash:8].[ext]",
           limit: 2048
         }
       },
       {
         test: /\.(svg|png|jpe?g|gif)(\?\S*)?$/,
         loader: "url-loader",
         options: {
-          name: "assets/imgs/[name].[hash:8].[ext]",
+          name: "assets/imgs/[name].[contenthash:8].[ext]",
           limit: 2048
         }
       }
@@ -156,7 +155,7 @@ module.exports = {
       maxAsyncRequests: 5,
       maxInitialRequests: 3,
       automaticNameDelimiter: '~',
-      name: true,
+      // name: true,
       cacheGroups: {
         react: {
           name: 'vendor',
@@ -190,36 +189,39 @@ module.exports = {
     //   },
     //   _DEV_: JSON.stringify(_DEV_),
     // }),
-    new ManifestPlugin({
-      fileName: 'asset-manifest.json'
-    }),
-    new SWPrecacheWebpackPlugin({
-      dontCacheBustUrlsMatching: /\.\w{8}\./,
-      filename: 'serviceWorker.js',
-      logger(message) {
-        console.log(message);
-        if (message.indexOf('Total precache size is') === 0) {
-          return;
-        }
-        if (message.indexOf('Skipping static resource') === 0) {
-          return;
-        }
-      },
-      minify: true,
-      navigateFallback: '/index.html',
-      navigateFallbackWhitelist: [/^(?!\/__).*/],
-      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
-    }),
+    // new GenerateSW(),
+    // new ManifestPlugin({
+    //   fileName: 'asset-manifest.json'
+    // }),
+    // new SWPrecacheWebpackPlugin({
+    //   dontCacheBustUrlsMatching: /\.\w{8}\./,
+    //   filename: 'serviceWorker.js',
+    //   logger(message) {
+    //     console.log(message);
+    //     if (message.indexOf('Total precache size is') === 0) {
+    //       return;
+    //     }
+    //     if (message.indexOf('Skipping static resource') === 0) {
+    //       return;
+    //     }
+    //   },
+    //   minify: true,
+    //   navigateFallback: '/index.html',
+    //   navigateFallbackWhitelist: [/^(?!\/__).*/],
+    //   staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
+    // }),
     new MiniCssExtractPlugin({
       filename: "static/css/[name].[contenthash].css",
     }),
     new webpack.ProvidePlugin({
       $http: [resolve('src/utils/http.ts'), 'default'],
       $msg: [resolve('node_modules/antd/es/message/index.js'), 'default']
     }),
-    new CopyWebpackPlugin([{
-      from: resolve('statics'),
-      ignore: ['.*']
-    }])
+    new CopyWebpackPlugin({
+      patterns: [{
+        from: resolve('statics'),
+        // ignore: ['.*']
+      }]
+    })
   ]
 }

build/webpack.base.conf.js

@@ -1,11 +1,11 @@
 const path = require('path'),
   webpack = require('webpack'),
-  merge = require('webpack-merge'),
+  { merge } = require('webpack-merge'),
   webpackConfig = require('./webpack.base.conf'),
   HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = merge(webpackConfig, {
-  devtool: 'cheap-modules-eval-source-map',
+  devtool: 'eval',
   mode: 'development',
   devServer: {
     port: '8060',
@@ -26,6 +26,7 @@ module.exports = merge(webpackConfig, {
     // inline: true,
     https: false, // true for self-signed, object for cert authority
     // noInfo: true, // only errors & warns on hot reload
+    progress: true,
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),

build/webpack.dev.conf.js

@@ -1,18 +1,21 @@
 'use strict'
-const path = require('path')
-const webpack = require('webpack')
-const merge = require('webpack-merge')
-const baseWebpackConfig = require('./webpack.base.conf')
-const HtmlWebpackPlugin = require('html-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
-const CleanWebpackPlugin = require('clean-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")
+const path = require('path'),
+webpack = require('webpack'),
+TerserPlugin = require("terser-webpack-plugin"),
+{merge} = require('webpack-merge'),
+baseWebpackConfig = require('./webpack.base.conf'),
+HtmlWebpackPlugin = require('html-webpack-plugin'),
+UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
+OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
 
 const _PROD_ = process.env.NODE_ENV === 'production'
 
-const webpackConfig = merge(baseWebpackConfig, {
+module.exports = merge(baseWebpackConfig, {
   mode: 'production',
   devtool: false,
+  optimization: {
+    minimizer: [new TerserPlugin()]
+  },
   plugins: [
     new CleanWebpackPlugin(['dist'], {root: path.resolve(__dirname, '../')}),
     new OptimizeCSSAssetsPlugin({
@@ -43,8 +46,6 @@ const webpackConfig = merge(baseWebpackConfig, {
       },
     }),
     // keep modules.id stable when vendor modules does not change
-    new webpack.HashedModuleIdsPlugin(),
+    // new webpack.HashedModuleIdsPlugin(),
   ]
 })
-
-module.exports = webpackConfig