Webpack5 入门学习笔记（中）：使用 Eslint 和 Babel 处理js资源

处理 js 资源

Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，需要一些兼容性处理。而且团队对代码格式是有严格要求的，不能由肉眼去检测代码格式，需要使用专业的工具来检测。

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

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

Eslint

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

这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能。使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

1. 配置文件

配置文件由很多种写法：

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

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

2. 具体配置

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

1
2
3
4
5
6
7
8
9
10
module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};
  1. parserOptions 解析选项
1
2
3
4
5
6
7
parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}
  1. rules 具体规则
  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
1
2
3
4
5
6
7
8
9
10
11
12
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. extends 继承

开发中一点点写 rules 规则太费劲了。

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

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

3. 在 Webpack 中使用

  1. 下载包
1
npm i eslint-webpack-plugin eslint -D
  1. 定义 Eslint 配置文件
  • .eslintrc.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};
  1. 修改 js 文件代码
  • main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

var result1 = count(2, 1);
console.log(result1);
var result2 = sum(1, 2, 3, 4);
console.log(result2);
  1. 配置
  • webpack.config.js
1
2
3
4
5
6
7
8
const ESLintWebpackPlugin = require("eslint-webpack-plugin");

 plugins: [
    new ESLintWebpackPlugin({
      // 指定检查文件的根目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  1. 运行指令，在控制台查看 Eslint 检查效果

4. VSCode Eslint 插件

下载了 Eslint 插件之后，即可不用编译就能看到错误，可以提前解决。但是此时就会对项目所有文件默认进行 Eslint 检查了， dist 目录下的打包后文件就会报错。但是只需要检查 src 下面的文件，不需要检查 dist 下面的文件。所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

  • .eslintignore
1
2
# 忽略dist目录下所有文件
dist

Babel

JavaScript 编译器。

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

1. 配置文件

配置文件由很多种写法：

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

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

2. 具体配置

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

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

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

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

3. 在 Webpack 中使用

  1. 下载包
1
npm i babel-loader @babel/core @babel/preset-env -D
  1. 定义 Babel 配置文件
  • babel.config.js
1
2
3
module.exports = {
  presets: ["@babel/preset-env"],
};
  1. 修改 js 文件代码
  • main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./sass/index.scss";
import "./styl/index.styl";

const result1 = count(2, 1);
console.log(result1);
const result2 = sum(1, 2, 3, 4);
console.log(result2);
  1. 配置
  • webpack.config.js
1
2
3
4
5
6
{
    test: /\.js$/,
    exclude: /node_modules/, // 排除node_modules代码不编译
    loader: "babel-loader",
},

  1. 运行指令

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

处理 Html 资源，自动引入打包

1. 下载包 npm i html-webpack-plugin -D

2. 配置

  • webpack.config.js
1
2
3
4
5
6
7
8
9
plugins: [

  new HtmlWebpackPlugin({
    // 以 public/index.html 为模板创建文件
    // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
    template: path.resolve(__dirname, "public/index.html"),
  }),
],

3. 修改 index.html

去掉引入的 js 文件，因为 HtmlWebpackPlugin 会自动引入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>webpack5</title>
  </head>
  <body>
    <h1>Hello Webpack5</h1>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
  </body>
</html>

4. 运行指令

此时 dist 目录就会输出一个 index.html 文件
Tips：自动引入的 script 里含有 defer 属性，下载后代码并不会立刻执行，直到dom加载完成，onload之前执行，并且不会阻塞其他处理过程，可以并行下载。带有defer属性的script标签可以放到页面中的任何位置。

开发服务器 & 自动化

每次写完代码都需要手动输入指令才能编译代码，为了让其自动化需要 dev-server

1. 下载包

1
npm i webpack-dev-server -D

2. 配置

  • webpack.config.js
1
2
3
4
5
6
// 开发服务器：不会输出资源，在内存中编译打包；因为不输出资源，clearn：true 需要注释掉
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },

3. 运行指令

1
npx webpack serve

注意运行指令发生了变化

使用开发服务器时，所有代码都会在内存中编译打包，并不会输出到 dist 目录下。