三体反攻舰队

Appearance

Return to top
On this page

在webpack中细致的处理js资源

js文件webpack本身就能处理，但初始能做的事情实在有限，我们可以添加更多的规则，来使你的项目更加的得心应手

  1. 让你的js代码增加代码格式验证，确保团队代码风格、质量保持一致 ， 主要使用到eslint
  2. 编译你的js代码，使其可以兼容更低版本的浏览器，依赖于babel.js

eslint

eslint是检测JavaScript代码格式的一种工具，可以更好的提升团队代码质量

eslint的坚持规则，依赖于配置文件，我们可以在项目的根目录中添加以下几种命名的文件来视为eslint的配置文件

  • .eslintrc
  • .eslintrc.js
  • .eslintrc.json
  • package.json中的eslintConfig字段，这种写法不需要新建文件

eslint会自动寻找他们，以上的配置只需要存在一种即可

安装eslint

在Configuring ESLint中我们可以学习到eslint的初始使用，这里我只是自己搬运一些简略的内容

sh
yarn add eslint --save-dev

npx eslint --init
1
2
3

输入以上的命令之后，就可以得到一个初始的配置文件

js
module.exports = {
  env: {
    browser: true, // 启动浏览中的全局变量
    es2021: true,
  },
  // 继承某种规则
  extends: [],
  // 解析选项
  parserOptions: {
    ecmaVersion: 'latest', // 使用什么版本的js代码
    sourceType: 'module', // 模块方式使用的是哪种？
  },
  // 配置规则
  rules: {
    "no-var": 2 // 不可以使用var来定义变量
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

我们可以在eslint的官方中文文档找到关于eslint的所有配置

将eslint与webpack结合

eslint和webpack结合之后，产生的现象当然就是，如果你的代码写的垃圾，你就没法打包。这是一种强制你写好代码的规则。

当然如果你只是一个刚开始学习的小白，这些规则会让你痛苦无比，最后只能被迫关掉它们。但良好的习惯总是在严苛的环境中养成的，如果你能很好的遵守规则，就可以减少代码出错的概率。

人类总是喜欢使用各种各样的规则，来限制自己，因为一旦人类脱离限制，就会变得肆无忌惮。

eslint在webpack中属于一个插件，我们可以在EslintWebpackPlugin看到关于它的使用

sh
yarn add eslint-webpack-plugin --save-dev
1

然后把插件添加到你的 webpack 配置。例如：

js

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

module.exports = {
  // ...
  plugins: [new ESLintPlugin({
    context: resolve(__dirname, 'src') // 只对src下的目录进行代码检查
  })],
  // ...
};
1
2
3
4
5
6
7
8
9
10

然后在index.js中添加一点违规代码，比如

js
var a = 2  // 在上面的规则中我们使用了 "no-var" 规则，所以这行代码会进行报错
1

然后执行webpack命令，果然就开始提示错误了

并且如果你安装了vscode中的eslint插件，错误将会在你编写的时候直接提示出来

忽略某些文件的eslint检车

比如我们打包出来的文件，不需要进行代码检测，只需要新建一个文件.eslintignore在其中添加你不想检测的目录即可

babel

babel 是一个js编译器，它跟webpage有着本质的区别，Babel可以将你的javascript代码编译成你需要的模样，而webpack只是一个打包工具，对其中内容的修改比较有限，专业的事情需要交给专业的工具。

比如你希望你编写的代码能够运行在ie浏览器上，那么交给Babel处理是个可靠的选择

在使用前我们最好观看以下的文档 , 当然也可以不看直接按照我的代码来写

  1. webpack中的babel-loader
  2. babel使用指南

babel配置文件

配置文件有许多种写的方案

  • babel.config.json
  • babel.config.js
  • .babelrc
    • .babelrc.js
    • .babelrc.json
  • package.json 中的babel字段

babel会全局查找它们。它们中只需要存在一个即可。

在babel7以上的版本官方推荐使用babel.config.json这种，在vscode中会有代码提示，我也使用这种

插句题外话 在这些配置文件中，其实使用.json的形式具有以下的优点

  1. 在json文件中也可以进行注释
  2. 可以获得ts的类型提示，更加方便操作。

在webpack中使用babel

在webpack中babel不是一个插件，而是一个loader

  1. 安装依赖
shell
yarn add -D babel-loader @babel/core @babel/preset-env
1
  1. 在配置文件中添加上这段，跟官网的有些出入，这是因为我们会把详细的配置写在babel.config.json中
js
module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: {
        loader: 'babel-loader',
      }
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
  1. 在项目的根目录中添加文件babel.config.json ，输入以下内容
json
{
  // 预设
  "presets": [
    "@babel/preset-env"
  ]
}
1
2
3
4
5
6

然后在查看打包效果前显然我们看一段没有添加Babel的打包代码

这是我们的源文件，应用到了最新的js特性

javascript
// src/index.js

let person = {
  name: '张三',
  age: 18
}

const add = ({ a, b }) => a + b

console.log('👴', person?.gender)
console.log('👴', add({
  a: 1,
  b: 2
}))

console.log('👴Promise',Promise)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这是没有添加babel的打包代码,可以看到几乎没有做声明处理

js
console.log("👴",{name:"张三",age:18}?.gender),console.log("👴",(({a:o,b:e})=>o+e)({a:1,b:2})),console.log("👴Promise",Promise);
1

使用babel后的效果

javascript
(()=>{var o,e={name:"张三",age:18};console.log("👴",null==e?void 0:e.gender),console.log("👴",(o={a:1,b:2}).a+o.b),console.log("👴Promise",Promise)})();
1

可以看到已经做了一些兼容性的处理了，但效果不明显，这是因为我们还没有添加足够的配置

我们可以多配置一些信息让Babeljs做更多的处理

json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3.6.5"
      }
    ]
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

然后需要安装core-js

sh
yarn add  -D @babel/cli  core-js
1

再进行编译，这时就可以看到多出很多的代码了

主要的原因是babel会在你的代码中实现Promise