Babel浅析

// .babelrc 文件 
{ "plugins": 
    [ "transform-es2015-template-literals" // 转译模版字符串的 plugins 
    ], 
    "presets": ["env", "stage-2"] 
}

Babel编译三个阶段：

1、解析

2、转换

3、生成

Babel自6.0开始就只负责解析和生成了，转换代码需要插件完成

"plugins": [ "transform-es2015-template-literals" ]
// 转译模版字符串的 plugins 

利用这个插件做模板字符串的转换

先执行plugins再执行presets

plugins从左到右执行
presets从右到左执行

"presets": [ 
[
	"env", { 
    // 是否自动引入 polyfill，开启此选项必须保证已经安装了 babel-polyfill 
    // “usage” | “entry” | false, defaults to false.
    "useBuiltIns": "usage" }],
    "stage-2"]

useBuiltIns

因为babel只处理新的JavaScript语法，而不对Array.from、Set、Map、Iterator等API进行编译，所以我们要使用babel-polyfill对这些对象API进行编译。

这个属性用来对babel-polyfill代码进行处理
usage 仅加载要使用的代码
false 加载所有代码
entry 根据target中浏览器配置来引入代码，有可能有代码是浏览器不支持的

babel-core

把js代码变成AST抽象语法树，然后利用里面的核心模块API进行转译