update: packages/eslint

Author: javaLuo

.eslintrc.json

@@ -5,7 +5,7 @@
     "es6": true,
     "mocha": true
   },
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 9,
     "ecmaFeatures": {

package.json

@@ -24,63 +24,63 @@
   },
   "dependencies": {
     "@rematch/core": "^2.2.0",
-    "antd": "^4.17.3",
-    "axios": "^0.24.0",
-    "core-js": "^3.19.3",
-    "eslint": "^7.32.0",
+    "antd": "^4.18.5",
+    "axios": "^0.25.0",
+    "core-js": "^3.21.0",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-loadable": "^5.5.0",
     "react-redux": "^7.2.6",
-    "react-router-dom": "^6.1.1",
+    "react-router-dom": "^6.2.1",
     "redux": "^4.1.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.5",
-    "@babel/plugin-proposal-class-properties": "^7.16.5",
-    "@babel/plugin-proposal-decorators": "^7.16.5",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.16.5",
-    "@babel/plugin-proposal-optional-chaining": "^7.16.5",
+    "@babel/core": "^7.17.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/plugin-proposal-decorators": "^7.17.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
+    "@babel/plugin-proposal-optional-chaining": "^7.16.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-runtime": "^7.16.5",
-    "@babel/preset-env": "^7.16.5",
-    "@babel/preset-react": "^7.16.5",
-    "@babel/runtime": "^7.16.5",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "^7.16.7",
+    "@babel/runtime": "^7.17.0",
     "antd-dayjs-webpack-plugin": "^1.0.6",
-    "autoprefixer": "^10.4.0",
-    "babel-eslint": "^10.1.0",
+    "autoprefixer": "^10.4.2",
     "babel-loader": "^8.2.3",
     "babel-plugin-import": "^1.13.3",
     "clean-webpack-plugin": "^4.0.0",
-    "copy-webpack-plugin": "^10.1.0",
-    "css-loader": "^6.5.1",
-    "css-minimizer-webpack-plugin": "^3.2.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "^6.6.0",
+    "css-minimizer-webpack-plugin": "^3.4.1",
     "dayjs": "^1.10.7",
-    "eslint-loader": "^4.0.2",
+    "eslint": "^8.8.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "express": "^4.17.1",
+    "eslint-webpack-plugin": "^3.0.1",
+    "express": "^4.17.2",
     "favicons": "^6.2.2",
     "favicons-webpack-plugin": "^5.0.2",
     "happypack": "^5.0.1",
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
-    "mini-css-extract-plugin": "^2.4.5",
+    "mini-css-extract-plugin": "^2.5.3",
     "mockjs": "^1.1.0",
-    "postcss": "^8.4.5",
+    "postcss": "^8.4.6",
     "postcss-loader": "^6.2.1",
     "prettier": "^2.5.1",
     "style-loader": "^3.3.1",
     "sw-precache-webpack-plugin": "^1.0.0",
-    "terser-webpack-plugin": "^5.2.5",
-    "webpack": "^5.65.0",
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.68.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-middleware": "^5.2.2",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-middleware": "^5.3.1",
     "webpack-hot-middleware": "^2.25.1",
     "webpackbar": "^5.0.2",
     "workbox-webpack-plugin": "^6.4.2",
@@ -93,4 +93,4 @@
     "not dead",
     "not op_mini all"
   ]
-}
+}

src/component/menu/index.js

@@ -20,21 +20,17 @@ export default function Menu() {
       </Link>
       |
       <span
+        class="link"
         onClick={() => goToTest()}
         to={{
           pathname: "/test",
           search: "?a=123&b=abc",
         }}
-        state={{ c: 456, d: "ABC" }}
-      >
+        state={{ c: 456, d: "ABC" }}>
         测试：api跳转
       </span>
       |
-      <a
-        href="https://github.com/javaLuo/react-luo"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <a href="https://github.com/javaLuo/react-luo" target="_blank" rel="noopener noreferrer">
         GitHub
       </a>
     </div>

src/component/menu/index.less

@@ -5,10 +5,12 @@
   .active {
     color: #67daf9;
   }
-  a {
+  a,
+  .link {
     padding: 0 5px;
     color: #0066cc;
     text-decoration: none;
+    cursor: pointer;
     &:hover {
       text-decoration: underline;
     }

src/container/features/index.js

@@ -39,17 +39,15 @@ export default function FeaturesPageContainer(props) {
         </div>
         <div className="list">
           <h2>HMR局部热更新</h2>
-          <div>
-            使用webpack-dev-middleware 和 webpack-hot-middleware设置了热更新
-          </div>
+          <div>使用webpack-dev-middleware 和 webpack-hot-middleware设置了热更新</div>
         </div>
         <div className="list">
           <h2>代码分割</h2>
           <div>react-loadable实现的代码分割</div>
           <div>src/container/root/index.js中能查看例子</div>
         </div>
         <div className="list">
-          <h2>webpack4.x</h2>
+          <h2>webpack5.x</h2>
           <div>使用了最新版本的webpack，编译速度更快</div>
         </div>
       </div>

webpack.dev.config.js

@@ -7,6 +7,7 @@ const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin");
 const CopyPlugin = require("copy-webpack-plugin"); // 用于直接复制public中的文件到打包的最终文件夹中
 const HappyPack = require("happypack"); // 多线程编译
 const webpackbar = require("webpackbar");
+const ESLintPlugin = require("eslint-webpack-plugin"); // eslint插件，代替原来的eslint-loader
 const PUBLIC_PATH = "/"; // 基础路径
 
 module.exports = {
@@ -29,13 +30,6 @@ module.exports = {
   },
   module: {
     rules: [
-      {
-        // 编译前通过eslint检查代码 (注释掉即可取消eslint检测)
-        test: /\.js?$/,
-        enforce: "pre",
-        use: ["eslint-loader"],
-        include: path.resolve(__dirname, "src"),
-      },
       {
         // .js .jsx用babel解析
         test: /\.js?$/,
@@ -88,6 +82,9 @@ module.exports = {
   },
   plugins: [
     new webpackbar(),
+    new ESLintPlugin({
+      context: path.resolve(__dirname, "src"),
+    }),
     new webpack.HotModuleReplacementPlugin(), // 热更新插件
     new AntdDayjsWebpackPlugin(), // dayjs 替代 momentjs
     new webpack.DefinePlugin({

webpack.production.config.js

@@ -12,6 +12,7 @@ const CopyPlugin = require("copy-webpack-plugin"); // 用于直接复制public
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin"); // 自动生成各尺寸的favicon图标 webpack5 wating up
 const TerserPlugin = require("terser-webpack-plugin"); // 对js进行压缩
 const webpackbar = require("webpackbar"); // 进度条
+const ESLintPlugin = require("eslint-webpack-plugin"); // eslint插件，代替原来的eslint-loader
 // const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 分析打包后各个包的大小
 /**
  * 基础路径
@@ -113,6 +114,9 @@ module.exports = {
      * **/
     new CleanWebpackPlugin(),
     new webpackbar(), // 打包时美化进度条
+    new ESLintPlugin({
+      context: path.resolve(__dirname, "src"),
+    }),
     new AntdDayjsWebpackPlugin(), // dayjs 替代 momentjs
     /**
      * 在window环境中注入全局变量,虽然暂时没用上，不过在真实开发中应该会用到