Skip to content
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