Eslint在Webpack中的配置和使用

Eslint是用于检测代码规范的插件，我们使用Eslint，关键是写Eslint的配置文件，里面写上各种rules规则，将来运行Eslint时就会以写的规则对代码进行检查。

配置Eslint

配置文件：

配置文件有多种写法：

• .eslintrc
  

• .eslintrs.js
  

• .eslintrs.json
  

区别在于配置格式不一样

package.json中eslintConfig：不需要创建文件，在原有基础上写

两种方式选其一即可

具体配置：

以.eslintrc.js为例，在项目根目录创建.eslintrc.js文件，用于配置eslint规则：

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

parserOptions解析选项

parserOptions: {
    ecmaVersion: 6,  // ES语法版本
    sourceType: "module",  // ES模块化
    ecmaFeatures: {  // ES其他特性
        jsx: false  // 如果是React项目，就需要开启jsx语法
    }
},

rules具体规则

• "off"或0:关闭规则
• "warn"或1:开启规则（警告级别，不会导致程序退出）
• "error"或2:开启规则（错误级别，当被触发时，程序会退出）

// 具体检查规则
rules: {
    "no-var":2,  // 禁止使用var定义变量
    eqeqeq: "warn" // 如果使用 === 或 !== 则会警告
},

更多规则详见规则文档

extends继承

如果不想自定义rules规则，可以直接继承现有规则

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

在Webpack中使用Eslint

1. 下载eslint： npm install eslint-webpack-plugin eslint --save-dev

2. 引入eslint（webpack.config.js）

const ESLintPlugin = require('eslint-webpack-plugin');

3. 在plugins里面配置eslint

// 插件
plugins: [
   // plugins的配置
   new ESLintPlugin({
       //检测哪些文件
       context:path.resolve(__dirname,'src')
   })
],

4. 创建eslint配置文件.eslintrc.js

module.exports = {
    // 解析选项
    parserOptions: {
        ecmaVersion: 6,  // ES语法版本
        sourceType: "module",  // ES模块化
        ecmaFeatures: {  // ES其他特性
            jsx: false  // 如果是React项目，就需要开启jsx语法
        }
    },
    // 具体检查规则
    rules: {
        "no-var":2,  // 禁止使用var定义变量
        eqeqeq: "warn" // 如果使用 === 或 !== 则会警告
    },
    //继承eslint规则
    extends:['eslint:recommended'],
    env:{
        node:true, //启用node中全局变量
        browser: true  //启用浏览器中全局变量
    }
}

.eslintignore

该文件用于说明哪些目录不需要eslint检查

如直接在文件中写dist，那么dist目录下的文件都不会被eslint检查

Babel在Webpack中的配置和使用

Babel的主要功能是将ES6语法编译为ES6以前的旧语法，目的是为了兼容版本较低的浏览器，以便能够运行在当前和旧版本的浏览器或其他环境中。

配置Babel

配置文件：

配置文件有多种写法：

babel.config.js、babel.config.json

或者.babelrc.js、.babelrc.json

具体配置：

以babel.config.js为例，在项目根目录创建babel.config.js文件:

module.exports = {
  //预设
  presets: []
}

presets预设

Babel插件，用于扩展Babel的功能。

• @babel/preset-env: 智能预设，允许使用最新的JavaScript
• @babel/preset-react: 用来编译React jsx语法的预设
• @babel/preset-typescript: 用来编译TypeScript的预设

在Webpack中使用Babel

1. 下载babel：npm install babel-loader @babel/core @babel/preset-env -D

2. 配置babel-loader： 在webpack.config.js文件中的module的rules中配置，详细配置如下：

//配置babel-loader
{
    test: /.js$/,
    exclude: /node_modules/,  //排除node_modules中的js文件（这些文件不处理）
    loader: 'babel-loader',
    // 可以直接在该下方位置配置babel的智能预设，也可以新建一个babel.config.js来单独配置
    // options: {
    //     presets: ['@babel/preset-env']
    // }
}

3. 配置babel智能预设（两种方式）

第一种：上方代码注释处

第二种：新建babel.config.js文件，代码如下：

module.exports = {
    //智能预设,能够编译ES6语法
    presets: ['@babel/preset-env']
}