（09）webpack 生産環境配置eslint

eslint 自動檢驗代碼是否規範的一種方式，如果有一點不符合代碼規範的地方，就會在打包時報錯。

如果你不喜歡eslint這種粗暴的方式，可以使用prettier這個插件

perttier插件介紹

webpack使用eslint 需要安裝 eslint eslint-loader

npm i eslint eslint-loader -D
           

airbnb(一個流行的eslint驗證代碼的風格) --> 需要下載下傳 eslint-config-airbnb-base eslint-plugin-import

npm i eslint-config-airbnb-base eslint-plugin-import -D
           

使用

在webpack.config.js中配置loader

{
    /*
      js的文法檢查： 需要下載下傳 eslint-loader eslint
      注意：隻檢查自己寫的源代碼，第三方的庫是不用檢查的
      airbnb(一個流行的js風格) --> 需要下載下傳 eslint-config-airbnb-base eslint-plugin-import
      設定檢查規則：
        package.json中eslintConfig中設定
          "eslintConfig": {
            "extends": "airbnb-base"， // 繼承airbnb的風格規範
            "env": {
              "browser": true // 可以使用浏覽器中的全局變量(使用window不會報錯)
            }
          }
    */
    test: /\.js$/,
    exclude: /node_modules/, // 忽略node_modules
    enforce: 'pre', // 優先執行
    loader: 'eslint-loader',
    options: {
      // 自動修複
      fix: true,
    },
  },
           

在package.json中配置

(複制代碼過去的時候記得去掉注釋)

"eslintConfig": {
    "extends": "airbnb-base", // 繼承airbnb的風格規範
    "env": {
    "browser": true // 可以使用浏覽器中的全局變量(使用window不會報錯)
            }
          }
           

就是這麼簡單,到這裡為止，整個生産環境需要注意的基本配置都已經完成了