Babel 7 插件配置指南
@babel/preset-env
@babel/preset-env
插件转译 stage-3
阶段以下的语法,可以配合 .browserslistrc
进行配置。
@babel/polyfill
@babel/preset-env
可以转译语法,但不能解决代码里的使用到的 API 如:Object.assign 、Array.incldues 等,这时需要使用 @babel/polyfill 来做兼容性处理。
@babel@7.4.0 开启已经弃用 @babel/polyfill,改用 import "core-js/stable"
替代,如果代码内部使用到了 Generator/async
还需要再引入 regenerator-runtime/runtime
。
垫片方式选择
entry:根据
.browserslistrc
配置,注入当前环境 API(Firefox 58)1
2
3// 转译前
import "core-js/stable"
const obj = Promise.resolve();1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54// 转译后
;
require("core-js/modules/es.symbol.description.js");
require("core-js/modules/es.symbol.match-all.js");
require("core-js/modules/es.error.cause.js");
require("core-js/modules/es.aggregate-error.js");
require("core-js/modules/es.aggregate-error.cause.js");
require("core-js/modules/es.array.at.js");
require("core-js/modules/es.array.find-last.js");
require("core-js/modules/es.array.find-last-index.js");
require("core-js/modules/es.array.flat.js");
require("core-js/modules/es.array.flat-map.js");
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.array.iterator.js");
require("core-js/modules/es.array.to-reversed.js");
require("core-js/modules/es.array.to-sorted.js");
require("core-js/modules/es.array.to-spliced.js");
require("core-js/modules/es.array.unscopables.flat.js");
require("core-js/modules/es.array.unscopables.flat-map.js");
require("core-js/modules/es.array.with.js");
require("core-js/modules/es.global-this.js");
require("core-js/modules/es.json.stringify.js");
require("core-js/modules/es.number.to-exponential.js");
require("core-js/modules/es.object.from-entries.js");
require("core-js/modules/es.object.has-own.js");
require("core-js/modules/es.promise.js");
require("core-js/modules/es.promise.all-settled.js");
require("core-js/modules/es.promise.any.js");
require("core-js/modules/es.promise.finally.js");
require("core-js/modules/es.reflect.to-string-tag.js");
require("core-js/modules/es.regexp.constructor.js");
require("core-js/modules/es.regexp.dot-all.js");
require("core-js/modules/es.regexp.exec.js");
require("core-js/modules/es.regexp.flags.js");
require("core-js/modules/es.string.at-alternative.js");
require("core-js/modules/es.string.match-all.js");
require("core-js/modules/es.string.replace.js");
require("core-js/modules/es.string.replace-all.js");
require("core-js/modules/es.string.trim-end.js");
require("core-js/modules/es.string.trim-start.js");
require("core-js/modules/es.typed-array.at.js");
require("core-js/modules/es.typed-array.find-last.js");
require("core-js/modules/es.typed-array.find-last-index.js");
require("core-js/modules/es.typed-array.sort.js");
require("core-js/modules/es.typed-array.to-reversed.js");
require("core-js/modules/es.typed-array.to-sorted.js");
require("core-js/modules/es.typed-array.with.js");
require("core-js/modules/web.dom-collections.iterator.js");
require("core-js/modules/web.immediate.js");
require("core-js/modules/web.queue-microtask.js");
require("core-js/modules/web.structured-clone.js");
require("core-js/modules/web.url-search-params.size.js");
const obj = Promise.resolve();usage: 根据
.browserslistrc
配置,按需(当前代码只使用了 Promise)注入当前环境 API(Firefox 58)1
2// 使用前
const obj = Promise.resolve();1
2
3
4// 使用后
;
require("core-js/modules/es.promise.js");
const obj = Promise.resolve();false 不处理垫片
core-js@2 和 core-js@3
两者没有本质的区别,core-js@3
新增了一些API,如:Array.flat 方法
@babel/runtime
babel 转译过程中会产生许多 helpers 函数,如:_createClass、_classCallCheck、_defineProperties等,如果每一个文件都包含这些辅助函数项目会产生许多冗余代码,@babel/runtime 包里面内置了许多这样的函数。
1 | // 转译前 |
1 | // 转译后 |
@babel/plugin-transform-runtime
作用1:自动移除语法转换后内联的辅助函数
上面提到 @babel/runtime 里面内置了许多 helpers 函数,那具体如何使用他来提高复用性呢?@babel/plugin-transform-runtime
就是干这件事情的,很明显看到这些辅助函数在使用这个插件转译后都变成require(xxxx) 形式。这样 webpack 打包的时候会基于模块来去重。
1 | // 使用后 |
作用2:防止污染全局环境
当代码里使用了 core-js 的API,自动引入 @babel/runtime-corejs3/core-js-stable/ 替代全局引入的 core-js/stable,
当代码里使用了 Generator/async 函数,自动引入 @babel/runtime/regenerator 来替代全局引入的 regenerator-runtime/runtime;