webpack配置js 语法检查 eslint

转载请注明 来源: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));