webpack学习笔记-处理js资源之ESlint

js资源webpack不是已经处理了吗，为什么我们还要处理呢？

原因是 webpack 对js处理是有限的，只能编译js中的ES模块化语法，不能编译其他语法，导致js不能在IE等浏览器运行，所以我们需要做一下兼容性处理。

其次，团队对代码格式也是有严格要求的。我们不能肉眼去检测代码格式，需要专业的工具来检测。

• 针对js的兼容性处理，我们使用Babel来处理
• 针对js的代码格式处理，我们使用Eslint

我们先检查代码格式化，代码格式无误后，进行兼容性处理。

Eslint

Eslint 可组装的JavaScript和JSX检查工具 是提供一个javascript代码检测工具。

我们使用Eslint，主要是他的Eslint配置文件，里面写上各种rules规则，将来运行 Eslint 时就会以rules对代码格式检查

配置文件

配置文件有多种写法

• .eslintrc.*:新建以下文件，此文件位于根目录下
  .eslintrc
.eslintrc.js
.eslintrc.json
  
• package.json中 eslintConfig： 不需要创建新的文件，在package.json文件的写就可以

Eslint 会查找和自动读取它们，所以以上配置只需要一个就可以了。

具体配置

我们以.eslintrc.js配置文件为例：

module.exports={
 // 解析选项
 parserOptions:{},
 // 具体检查规则
 rules:{},
 //继承其他规则
 extends:[]
}

1. parserOptions解析选项：

parserOptions:{
    ecmaVersion: 6, // es版本
    sourceType: 'module', // es模块化
    ecmaFeatures: {
        jsx: true
    }

2. rules 具体规则

• 'off'或 0 关闭规则
• 'warn'或 1开启规则，使用警告级别的错误，不会导致程序错误
• 'error'或 2 开启规则，使用错误级别的错误， 会导致程序错误

栗子：

rules:{
  semi: 'error',// 禁止使用分号
}

查看更多规则：规则文档

3. extends继承

开发中一点一点写rules规则太费劲了，所以有extends继承现有的规则

• Eslint官方规则：eslint:recommemded
• Vue Cli官方的规则：plugin:vue/essential
• React Cli官方的规则：react-app

tip: rules中的权限大于继承的

在webpack中的使用

• 下载eslint

npm install eslint eslint-webpack-plugin --save-dev

• 在项目根目录下创建.eslintrc.js:

• 在webpack.config.js中使用

const EslintPlugin = require('eslint-webpack-plugin')
module.exports={
   plugin:[
    new Eslint({
      // 哪些文件我们检查，这里我们检测src下面的文件
      context: path.resolve(__dirname, "src")
    })
   ]
}