babel编译流程
babel
的编译流程分为3布:
- parse:通过parser将源码转换为抽象语法树(AST)
- transform:遍历AST,调用各种transform插件对AST进行增删改操作
- generate:把转换后的AST打印成目标代码,并生成sourcemap
预设
插件集合
预设的执行顺序是倒序的,即从后往前加载预设
插件
插件的加载顺序是正序的,即从前往后加载插件
插件在预设之前加载
书写babel的插件需要向外暴露一个函数,函数中返回一个visitor对象,visitor对象中定义了需要处理的节点的对应函数,babel在递归遍历AST语法树时,遇到对应的节点会调用注册的处理函数,完成对AST的增删改操作,从而实现一个babel插件。
babel配置
babel@7
babel.config.json文件配置如下:
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage", // 按需引入polyfill
"targets": {
"chrome": "58",
"ie": "10"
}
},
]
],
"plugins": [ "@babel/plugin-transform-runtime"] // 语法转换
}
以上配置是基于@babel/polyfill
,而@babel/polyfill
是基于core-js2.x
版本的。
从babel7.4版本开始,Babel官方已经不推荐再使用@babel/polyfill,这也包括官方的polyfill.js库文件。因此从2019年年中开始,我就的新项目都应该使用core-js@3和regenerator-runtime这两个包。
{
"presets": [
["@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3,
"modules": false,
"targets": {
"chrome": "58",
"ie": "10"
}
}
]
],
"plugins": [ "@babel/plugin-transform-runtime"]
}