babel

Babel介绍

Babel 是一个通用的多用途 JavaScript 编译器。通过 Babel 你可以使用（并创建）下一代的 JavaScript，以及下一代的 JavaScript 工具。在新的javascript得到广泛普及之前，Babel 能够让你提前（甚至数年）使用它们。而不用担心环境是否支持。
不过 Babel 的用途并不止于此，它支持语法扩展，能支持像 React 所用的 JSX 语法，同时还支持用于静态类型检查的流式语法（Flow Syntax）。
更重要的是，Babel 的一切都是简单的插件，谁都可以创建自己的插件，利用 Babel 的全部威力去做任何事情。

babel5是一个包，包含很多不必要的东西，但在babel6中，将其拆成两个包，babel-cli和babel-core。如果想在node中使用就下载babel-core

使用 Babel

1、babel-cli

Babel 的 CLI 是一种在命令行下使用 Babel 编译文件的简单方法。

$ babel example.js --out-file compiled.js

–out-file 或着 -o 可以将结果写入到指定的文件。即编辑example.js文件，然后把结果放在compiled.js文件中

2、babel-core

babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。通过它，才能使用各种babel的api

如字符串形式的 JavaScript 代码可以直接使用 babel.transform 来编译。

babel.transform("code();", options);
// => { code, map, ast }

3、配置 Babel

从Babel 6以后, 默认的插件被移除, 如果没有指定一个插件，Babel将会原样输出, 不会进行编译。所以需要安装插件（plugins）或预设（presets，也就是一组插件）来指示 Babel 去做什么事情。
(插件是一个功能，预设是一组功能插件)

1、babel-preset-es2015

预设 babel-preset 系列打包了一组插件，类似于餐厅的套餐。如 babel-preset-es2015 打包了 es6 的特性，同样的，还有babel-preset-2016，babel-preset-2017。

2、babel-preset-latest

latest是一个特殊的presets，包括了es2015，es2016，es2017的插件（目前为止，以后有es2018也会包括进去）。即总是包含最新的编译插件。

3、babel-preset-env

前两个预设存在的问题是包含了很多不必要的功能。比如, 现代的浏览器大多支持ES6的generator, 但是如果你使用babel-preset-es2015, 它会将generator函数编译为复杂的ES5代码, 这是没有必要的。但使用babel-preset-env, 我们可以声明环境, 然后该preset就会只编译包含我们所声明环境缺少的特性的代码，因此也是比较推荐的方式。

在babelrc文件中设置

{
  "presets": ["env"]
}

当没有添加任何的配置选项时，babel-preset-env默认行为是和babel-preset-latest是一样的

当配置时

"presets": [
    [
      "env",
      {
        "targets": {
          "browsers": ["last 2 versions", "ie >= 7"]
          // 指定支持主流浏览器最新的两个版本以及IE 7+:
          // "browsers": "> 5%"
          // 支持超过市场份额5%的浏览器:
        }
      }
    ]
  ]
}

3、Babel之处理api

Babel 几乎可以编译所有时新的 JavaScript 语法，但对于 APIs 来说却并非如此。例如： Promise、Set、Map 等新增对象，Object.assign、Object.entries等静态方法。

为了支持上面的api 需要引入其他插件

1、babel-polyfill

原理：babel-polyfill 的做法是将全局对象通通污染一遍，比如想在 node 0.10 上用 Promise，调用 babel-polyfill 就会往 global 对象挂上 Promise 对象。 这个插件的缺点是增加一些不必要的代码，webpack打包后比较大，最重要的是会污染全局

2、babel-runtime（建议在生产环境中使用）

原理：babel-runtime 的做法是自己手动引入 helper 函数，还是上面的例子，const Promise = require(‘babel-runtime/core-js/promise’) 就可以引入 Promise。

缺点是：在代码中中直接引入 helper 函数，意味着不能共享，造成最终打包出来的文件里有很多重复的 helper 代码。

3、babel-plugin-transform-runtime （建议在开发环境中使用）

babel-runtime 更像是分散的 polyfill 模块，我们可以在自己的模块里单独引入，比如 require(‘babel-runtime/core-js/promise’) ，它们不会在全局环境添加未实现的方法，只是，这样手动引用每个 polyfill 会非常低效。我们借助 Runtime transform 插件来自动化处理这一切。

4、Babel之plugins/presets排序

plugins/presets使用的排序问题

• 具体而言，plugins优先于presets进行编译。

• plugins按照数组的index增序(从数组第一个到最后一个)进行编译。

• presets按照数组的index倒序(从数组最后一个到第一个)进行编译。因为作者认为大部分会把presets写成[“es2015”, “stage-0”]。具体细节可以看这个。