轉載請注明 來源:http://www.eword.name/
Author：eword
Email:eword@eword.name

webpack配置js 語法檢查 eslint

js 語法檢查主要用到的 loader 和插件有：eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import

這里主要采用的是airbnb編碼規范（參見：https://github.com/BingKui/javascript-zh）

一、安裝loader 和插件

> npx install-peerdeps --dev eslint-config-airbnb-base    
#安裝 loader 和插件eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
> npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

插件信息參見：https://www.npmjs.com/package/eslint-config-airbnb-base

二、配置

2.1、配置 webpack.config.js

/*
    webpack.config.js webpack的配置文件
    作用:指示webpack干哪些活(當你運行webpack指令時,會加載里面的配置)所有構建工具都是基于nodejs平臺運行的~模塊化默認采用commonjs.
    loader: 1.下載 2.使用(配置loader)
    plugins: 1.下載2. 引入 3.使用

    路徑： ./webpack.config.js
*/

……

  // loader的配置
  module: {
    rules: [
  
        ……
        
        /*
            語法檢查: eslint-loader eslint
            注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的
            設置檢查規則:
                在package.json中eslintConfig中設置
                  "eslintConfig": {
                        "extends": "airbnb-base"
                    }
                airbnb-->eslint-config-airbnb-base eslint-plugin-import eslint
            */
   	  {
        test: /\.js$/,
        // 指定檢查的目錄，或者配置排除某些文件夾
        // include: [path.resolve(__dirname, 'src')], 
        // 注意:只檢查自己寫的源代碼,第三方的庫是不用檢查的,這里排除node_modules文件夾
        exclude: /node_modules/,
        loader: 'eslint-loader',
        /*
        1. pre 優先處理
        2. normal 正常處理（默認）
        3. inline 其次處理
        4. post 最后處理
        */
        enforce: 'pre',
        options: {
          // 這里的配置項參數將會被傳遞到 eslint 的 CLIEngine
          // 自動修復eslint的錯誤
          fix: true,
        },
      },


		……

       ]
                    
 ……

2.2、配置 package.json 文件

// package.json  npm 包配置文件
……
// 配置 eslint 規則檢查
  "eslintConfig": {
    "extends": "airbnb-base"
  }
 
……

三、驗證配置是否生效

錯誤范例

// 測試配置是否生效,在 js 刻意書寫如下不規范內容

……


function add(x, y) {return x + y;
}

console.log(add(1, 2));

……

打包測試

## webpack 打包后告警
> webpack

………… …………

WARNING in ./src/js/index.js
Module Warning (from ../node_modules/eslint-loader/dist/cjs.js):

/Users/ewordeword.name/Projects/vue/webpack-9/src/js/index.js
  15:1  warning  Unexpected console statement  no-console

? 1 problem (0 errors, 1 warning)

………… …………

結論：

1. 配置生效了，且自動進行了修復；
2. console.log()出現了告警，在生產環境中不應出現（這里是為了調試，所有要加忽略選項）eslint-disable-next-line

最終得到結果

function add(x, y) {
  return x + y;
}

// 下一行eslint所有規則都失效(下一行不進行eslint檢查)，生產環境中建議不要加忽略選項，也不建議出現 console相關命令
// eslint-disable-next-line
console.log(add(1, 2));