2018/12/16 - 你该知道的Babel7 #28
Description
Babel是一个广泛使用的转码器，可将任意任意版本语法和API转到当前环境支持的版本。
使用
将配置文件.babelrc，放在项目根目录。
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
],
["@babel/preset-react"]
],
"plugins": [
[
"import",
{
"libraryName": "antd-mobile",
"style": "css"
}
],
"@babel/plugin-syntax-dynamic-import"
]
}
概念介绍
Babel默认只转换新的JS句法（syntax），而不转换新的API，比如Set、Maps等全局对象，以及一些定义在全局对象上的方法，比如Object.assign、Array.from等，具体可以查看这个列表，所以此时就需要包含core-js、regenerator、helpers方法库的@babel/polyfill或@babel/runtime。
@babel/core
Babel编译器，包括了几乎所有核心API，将JS代码抽象成AST，再分析做对应的转换处理。
presets
Babel预设，设定转码规则，包含某一部分plugins，从下往上执行。
- @babel/preset-env：根据设置的目标运行环境，“自动”决定加载哪些插件和 polyfill 的 preset
- @babel/preset-react：转换react语法
- babel-preset-es201X：将es(X+1)代码编译为esX，已经废弃由@babel/preset-env取代
@babel/preset-env
{
"presets": [
[
"@babel/preset-env",
{
"targets": { // 目标环境，建议去除，采用在根目录设置.browserslistrc
"browsers": "> 5%"
},
"modules": false, // 设置ES6 模块转译的模块格式 默认是 commonjs
"useBuiltIns": "usage", // @babel/polyfill加载方式，
"debug": true, // 调试模式，开启会输出目标环境、transforms、plugins和polyfills
"include": [], // 总是启用哪些 plugins
"exclude": [] // 强制不启用哪些 plugins
}
]
]
}useBuiltIns分析
按需是根据目标环境，polyfills影响代码体积
- false：按需加载transforms、plugins，不加载polyfills
- usage：按需加载transforms、plugins和polyfills
- entry：按需加载transforms、plugins，加载所有polyfills
stage-X
对ES一些提案的支持，向下兼容，比如stage-0包含stage-[1-3]。在Babel7已经废弃，换成proposal-x。
- stage-0：想法
- stage-1：建议
- stage-2：草案
- stage-3：候选
- stage-4：完成
plugins
Babel插件，从上往下执行，并且在presets之前运行。
@babel/runtime
包含core-js、regenerator、helpers，用来转换新的属性和方法。
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}注意：
- 引入的方法是module级的，会存在重复引用的问题，需要搭配
@babel/plugin-transform-runtime来做自动化引用。 babel-runtime的引用不是全局生效的，因此实例化的对象方法则不能被 polyfill，比如[1,2,3].includes这样依赖于全局Array.prototype.includes的调用依然无法使用，比较适用于库。
@babel/polyfill
功能和@babel/runtime类似，在@babel/preset-env配置useBuiltIns开启，详细可见其说明。
注意：
- @babel/polyfill引用是全局的，引入可以一劳永逸，但会污染子模块的变量引用，适用于业务项目。
参考文档
广而告之
本文发布于薄荷前端周刊，欢迎Watch & Star ★，转载请注明出处。