Babel7最佳实践
- 0
#讨论区
00条评论
实时对话
loading...
需要用到的网站
前置知识
围绕AST 解析(parse)->转化(transform)->生成(generate)
执行顺序
plugins->presets
插件优先于预设
插件从前往后执行
预设从后往前执行
babel转化核心包，内置转化方法
使用命令行编译文件，开发插件需要用到
根据配置的浏览器适配代码，默认只会转化语法，不会转化新api，新api可以通过2种方法适配，
安装
npm i @babel/runtime-corejs3npm i @babel/runtimejson
从 @babel/runtime 按需加载辅助函数公共包，我们可以直接安装这个包，会自动依赖**@babel/runtime** 不需要手动安装@babel/runtime,生产环境需要 @babel/runtime
npm i @babel/runtime-corejs3 （推荐）npm i @babel/runtimejson
//todo
//todo
一堆插件的集合，避免一个个配置插件
js
{
"plugins": [
"@babel/plugin-transform-runtime"
],
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"targets": "> 0.25%, not dead",
"corejs": "3",
"useBuiltIns": "usage"
}
]
]
}
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 3
}
],
[
"@zzf-babel/plugins/lib/babel-plugin-import",
{
"lib": "foo"
}
]
],
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "false",
"modules": false,
"targets": {
"browsers": [
"> 1%",
"last 2 versions",
"not dead"
]
}
}
]
]
}
module.exports = function (options) {
console.log(options)
return {
presets: [],
plugins: [
require("@zzf-babel/plugins/lib/babel-plugin-remove-console")
]
};
}