准备知识
需要用到的网站
前置知识
- babel编译流程
围绕AST 解析(parse)->转化(transform)->生成(generate)
- parse阶段 @babel/parse
- transform阶段 @babel/traverse遍历AST、@babel/types可以判断AST的各个类型 @babel/template 简化AST创建逻辑
- generate阶段 @babel/generate生成source map
执行顺序
plugins->presets
插件优先于预设
插件从前往后执行
预设从后往前执行
babel基础
@babel/core
babel转化核心包,内置转化方法
@babel/cli
使用命令行编译文件,开发插件需要用到
@babel/preset-env
根据配置的浏览器适配代码,默认只会转化语法,不会转化新api,新api可以通过2种方法适配,
- 配置 corejs useBuiltIns 会污染全局
- 配置 @babel/plugin-transform-runtime 提供别名,不会污染全局
安装
npm i @babel/runtime-corejs3
npm i @babel/runtime
json{ "plugins": [ "@babel/plugin-transform-runtime" ], "presets": [ [ "@babel/preset-env", { "modules": false, "targets": "> 0.25%, not dead", "corejs": "3", "useBuiltIns": "usage" } ] ] }
@babel/plugin-transform-runtime
从 @babel/runtime 按需加载辅助函数公共包,我们可以直接安装这个包,会自动依赖**@babel/runtime** 不需要手动安装@babel/runtime,生产环境需要 @babel/runtime
- 配置了corejs为3
npm i @babel/runtime-corejs3
(推荐) - 没有配置corejs
npm i @babel/runtime
json{ "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" ] } } ] ] }
babel插件
//todo
自定义插件
//todo
babel预设
一堆插件的集合,避免一个个配置插件
自定义预设
jsmodule.exports = function (options) { console.log(options) return { presets: [], plugins: [ require("@zzf-babel/plugins/lib/babel-plugin-remove-console") ] }; }