babel轉換流程
code轉換爲AST => 遍歷AST樹、進行修改 => 還原爲code
babel結構
-
@babel/core
AST轉換的核心 -
@babel/cli
打包工具 -
@babel/plugin*
Babel 插件機制,Babel基礎功能不滿足的時候,手動添加些 -
@babel/preset-env
預設插件集,減少配置各類插件 -
@babel/polyfill
把瀏覽器某些不支持API,兼容性代碼全部導入到項目,不管你是不是用到,缺點是代碼體積特別大 -
@babel/runtime
把你使用到的瀏覽器某些不支持API,按需導入,代碼少
presets
-
@babel/preset-env
:最常用的 presets,包含大部分es6語法 -
@vue/app
:Vue presets,在@babel/preset-env
基礎上,添加了自定義的plugins -
preset的常用參數
debug
默認是 false 開啓後控制檯會看到 哪些語法做了轉換,Babel的日誌信息,開發的時候強烈建議開啓useBuiltIns
- false 啥子也不幹
- entry 引入全部polyfill
- usage 按需引入polyfill
targets
支持哪些瀏覽器
polyfill
babel-polyfill是將整個es2015+環境引入到全局中,會造成全局污染
require('core-js/modules//set');
改變了原型,所以可以在實例上使用方法
通過配置useBuiltIns
可實現按需加載
// .babelrc
{
"presets": [
[
"@babel/preset-env",
{
"debug": true,
"useBuiltIns": "usage",
"targets":{
"browsers":["> 1%", "last 2 versions", "not ie <= 8"]
}
}
]
],
"plugins": [
[
"@babel/plugin-transform-runtime"
]
],
}
transform-runtime和babel-runtime
定義特有變量引入api,從而避免全局污染
var _set = require('@babel/runtime/helpers/set');
babel-plugin-transform-runtime
是插件,轉換代碼爲對babel-runtime
的引用babel-runtime
是真正提供runtime環境的包
// 輸入的ES6代碼
var sym = Symbol();
// 通過transform-runtime轉換後的ES5+runtime代碼
var _symbol = require("babel-runtime/core-js/symbol");
var sym = (0, _symbol.default)();