webpack4之babel配置

发表于 | 分类于


babel

是将webpack和babel搭建一个中间的桥梁，将ES6转为ES5需要其他依赖包。babel/core能识别js内容，将js转换为AST抽象语法树，再把AST抽象语法树转为js

1
2
3
4
5
6
7
8
# npm install --save-dev babel-loader @babel/core

// webpack.config.js
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}
preset-env

将ES6转为ES5的依赖包

1
2
3
4
5
6
7
8
# npm install @babel/preset-env --save-dev

// .babelrc
{
  "presets": [["@babel/preset-env", {
    "useBuiltIns": "usage" // 使用polyfill工具的时候，为了避免将所有的方法转化为低版本代码，只转化使用过的方法进行配置，减少代码体量
  }]]
}
polyfill

preset-env只是将部分语法转为ES5，但是有些语法如Promise、map在低版本还是不存在的，需要进一步转化

1
# npm install --save @babel/polyfill
指定浏览器运行的版本

假如知道了浏览器的运行版本，就不需要兼容所有浏览器了，可以减少打包的代码量

1
2
3
4
5
6
7
8
9
10
11
12
// .babelrc
{
  "presets": [["@babel/preset-env", {
    "targets": {
      "edge": "17", // IE兼容17
      "firefox": "60", // 兼容火狐60
      "chrome": "67", // 兼容谷歌67,假如谷歌67以上已经支持Promise和map，它就不会进行重新定义
      "safari": "11.1"
    },
    "useBuiltIns": "usage"
  }]]
}
工具库项目优化-transform-runtime

针对业务项目打包是没问题的。但是工具类的项目打包，不能让polyfill打包后的污染全局环境

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# npm install --save-dev @babel/plugin-transform-runtime
# npm install --save @babel/runtime
# npm install --save @babel/runtime-corejs2

// .babelrc
{
  "plugins": [["@babel/plugin-transform-runtime", {
    "absoluteRuntime": false,
    "corejs": 2,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
  }]]
}