Webpack5处理JS(ESLint、Babel)资源

一、简介

有人可能会问，js资源Webpack不能已经处理了吗，为什么我们还要处理呢？

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

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

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

通常做法是先完成Eslint，检测代码格式无误后，在由Babel做代码兼容性处理

二、Eslint

2.1 简介

可组装的JavaScript和JSX检查工具。

这句话意思就是：它是用来检测 js 和 jsx语法的工具，可以配置各项功能

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

2.2 配置文件

配置文件由很多种写法：

• .eslintrc.*：新建文件，位于项目根目录
  • .eslintrc
  • .eslintrc.js
  • .eslintrc.json
• package.json 中eslintConfig：不需要创建文件，在原有文件基础上写

区别在于配置格式不一样

ESLint会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2.3 具体配置

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

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

2.3.1 parserOptions解析选项

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

2.3.3 rules规则

• off或0 ：关闭规则
• warn或1 ：开启规则，使用警告级别的错误：warn (不会导致程序退出)
• error或 2 ：开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

更多规则详见：规则文档

2.3.4 extends继承

开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

现有以下较为有名的规则：

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

2.4 使用

2.4.1 安装依赖

npm i eslint-webpack-plugin eslint -D

2.4.2 定义Eslint配置文件

以.eslintrc.js为例：

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

2.4.3 配置Eslint插件

在webpack.config.js中引入并使用eslint插件，如下：

const ESLintWebpackPlugin = require('eslint-webpack-plugin')
...
// 插件
plugins: [
  new ESLintWebpackPlugin({
    // 指定检查文件的根目录
    context: path.resolve(__dirname, 'src')
  })
],

2.4.4 测试

修改main.js，如下：

...
var result = sub(10, 5);
console.log(result);

执行npx webpack，报错如下：

说明配置生效了，当把var修改为const后，再次测试，成功！

2.5 VSCode ESLint插件

打开VSCode，下载Eslint插件，即可不用编译就能看到错误，可以提前解决

但是此时就会对项目所有文件默认进行Eslint检查了，我们dist目录下的打包后文件就会报错。但是我们只需要检查src下面的文件，不需要检查dist下面的文件。

所以可以使用Eslint忽略文件解决。在项目根目录新建.eslintignore文件，内容如下:

# 忽略dist目录下文件
dist

三、Babel

3.1 简介

JavaScript编译器。

主要用于将ES6语法编写的代码转换为向后兼容的JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中

3.2 配置文件

配置文件由很多种写法：

• babel.config.*：新建文件，位于项目根目录
  • babel.config.js
  • babel.config.json
• .babelrc.*：新建文件，位于项目根目录
  • .babelrc
  • .babelrc.js
  • .babelrc.json
• package.json 中babel：不需要创建文件，在原有文件基础上写

Babel会查找和自动读取它们，所以以上配置文件只需要存在一个即可

3.3 具体配置

以babel.config.js配置文件为例：

module.exports = {
  // 预设
  presets: ["@babel/preset-env"],
}

3.3.1 presets 预设

简单理解就是一组Babel插件, 扩展Babel功能

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

3.4 安装依赖

npm i babel-loader @babel/core @babel/preset-env -D

3.5 webpack配置文件

在webpack.config.js中配置babel

{
  test: /\.js$/,
  exclude: /node_modules/, // 排除node_modules代码不编译
  loader: "babel-loader",
},

3.6 测试

执行npx webpack，打开打包后的 dist/static/js/main.js文件查看，会发现箭头函数等 ES6 语法已经转换了