webpack5的JS基础配置

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

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

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

在使用webpack进行打包时，先试用Eslint检测代码格式无误后，再由 Babel 做代码兼容性处理。

一、EsLint

EsLint 是用来检测语法的工具，可以通过修改配置里的规则项，实现各种检测。

1. 使用

安装依赖:npm i eslint-webpack-plugin eslint -D

配置webpack.config.js:

const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
  entry: "./src/main.js",
  output: {
    ...
  },
  module: {
    rules: [
     ...
    ],
  },
  plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  mode: "development",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. 配置文件

• .eslintrc.*配置文件文件：新建文件，位于项目根目录，不同后缀区别在于配置格式不一样
  .eslintrc
  .eslintrc.js
  .eslintrc.json
• package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

3. 具体配置

以.eslintrc.js文件为例，基本格式为

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

parserOptions 解析选项:

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

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 除了少数情况下不会有警告
  ],
}
1
2
3
4
5
6
7
8
9
10
11
12

extends 继承:
配置extends可以继承现有的规则（需提前安装依赖）

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

// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};
1
2
3
4
5
6
7
8
9

二、Babel

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

转换样例：

// Babel 接收到的输入是： ES2015 箭头函数
[1, 2, 3].map(n => n + 1);

// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});
1
2
3
4
5
6
7

1. 在webpack中使用

安装依赖:npm i babel-loader @babel/core @babel/preset-env -D
配置webpack.config.js:

const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

module.exports = {
  entry: "./src/main.js",
  output: {
    ...
  },
  module: {
    rules: [
     ...,
      {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules代码不编译
        loader: "babel-loader",
      },
    ],
  },
  plugins: [
   ...
  ],
  mode: "development",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.配置文件

配置文件由很多种写法：

• babel.config.*：新建文件，位于项目根目录
• .babelrc.*：新建文件，位于项目根目录

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

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

3.具体配置

以babel.config.js为例：

module.exports = {
  // 预设
  presets: [],
};
1
2
3
4

presets 预设:

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

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