Babel插件原理与配置

对于现如今的web前端开发，Babel已经成为前端开发必不可少的插件了。它可以让开发者使用高级版本的ES，从而让开发更快速，代码更简洁，而不必过多考虑各种浏览器的兼容性。因为Bable可以解决这个问题，让高版本的JS编译为低版本的JS。那它的原理是什么呢？

Babel做了什么

• 解析 Parse
  babel通过babylon将代码解析生成抽象语法树( 即AST )，简单来说就是进行了词法分析与语法分析的过程编译过程。(扩展：一般来说每个 js 引擎都有自己的 AST，比如熟知的 v8，chrome 浏览器会把 js 源码转换为抽象语法树，再进一步转换为字节码或机器代码)
• 转换 Transform
  babel 接受得到 AST 并通过 babel-traverse 对其进行遍历，在此过程中进行添加、更新及移除等操作再生成新的AST。
• 生成 Generate
  使用babel-generator转换成JS。

babel-core模块则是将三者结合使得对外提供的API做了一个简化。
babel只是转译新标准引入的语法，比如ES6箭头函数：而新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的 API 等（Proxy、Set 等）, 这些事不会转译的，需要引入对应的 polyfill 来解决。

常用配置

常见做法是设置一个根目录下的 .babelrc 文件，统一将 babel 的设置都放在这里。

常用 options 字段说明

• env：env 的核心目的是通过配置得知目标环境的特点，然后只做必要的转换。例如目标浏览器支持 es2015，那么 es2015 这个 preset 其实是不需要的，于是代码就可以小一点(一般转化后的代码总是更长)，构建时间也可以缩短一些。如果不写任何配置项，env 等价于 latest，也等价于 es2015 + es2016 + es2017 三个相加(不包含 stage-x 中的插件)。
• plugins：要加载和使用的插件，插件名前的babel-plugin-可省略；plugin列表按从头到尾的顺序运行
• presets：要加载和使用的preset ，每个 preset 表示一个预设插件列表，preset名前的babel-preset-可省略；presets列表的preset按从尾到头的逆序运行（为了兼容用户使用习惯） 同时设置了presets和plugins，那么plugins的先运行；每个preset和plugin都可以再配置自己的option。
  常见的配置方法：

{
    "plugins": [
        "transform-remove-strict-mode",
        ["transform-nej-module", {"mode": "web"}]
    ],
    "presets": [
        "env"
    ]
}