babel

首先，先说一下babel是什么？

Babel 是一个 JavaScript 编译器。

然后再介绍一下babel的四个点

1. 使用方式
2. babel-core
3. babel-polyfill
4. plugin和preset

1.使用方式，介绍两种比较常见的方式

• 用在package.json中
• 用在.babelrc中

用在 package.json中,配置如下

  "babel": {
    "plugins": [
      "transform-decorators-legacy"
    ],
    "presets": [
      "react-app"
    ]
  },

用在.babelrc中，配置如下

{
  "presets": [
    "env",
    "stage-0",
    "react"
  ],
  "plugins": ["transform-decorators-legacy"]
}

2.babel-core

如果你需要以编程的方式来使用 Babel，可以使用 babel-core 这个包
babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。具体的实现让配置文件的插件来处理。

3.babel-polyfill

babel预设可以编译几乎所有的JavaScript新语法，但是对于API却不能解决（内置对象比如 Promise，静态方法比如 Array.from 或者 Object.assign，实例方法比如 Array.prototype.includes 和生成器函数），解决这个问题babel用的是 babel-polyfill。

Webpack 中使用babel-polyfill
在 webpack.config.js 中，将 babel-polyfill 加到你的 entry 数组中：

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

4.plugin和preset

plugin/preset的排序

• Plugin 会运行在 Preset 之前。
• Plugin 会从第一个开始顺序执行。ordering is first to last.
• Preset 的顺序则刚好相反(从最后一个逆序执行)。

Plugin/Preset 路径

如果 plugin 是通过 npm 安装，你可以传入 plugin 名字给 babel，babel 将检查它是否安装在 node_modules 中
"plugins": ["babel-plugin-myPlugin"]
你也可以指定你的 plugin/preset 的相对或绝对路径。
"plugins": ["./node_modules/asdf/plugin"]

Plugin/Preset 简写

如果你使用 babel-plugin- 作为 plugin 的前缀，你可以使用简写的形式省略掉该前缀。
"plugins": ["myPlugin"] preset 与之相同

"presets": ["babel-preset-myPreset"]
vs
"presets": ["myPreset"]

这也适用于包裹作用域:
"presets": ["@org/babel-preset-name"]
简写:

"presets": ["@org/name"]

presets

presets属性告诉Babel要转换的源码使用了哪些新的语法特性，presets是一组Plugins的集合
babel-preset-es2015: 可以将es6的代码编译成es5.
babel-preset-es2016: 可以将es7的代码编译为es6.
babel-preset-es2017: 可以将es8的代码编译为es7.
babel-preset-latest: 支持现有所有ECMAScript版本的新特性。
babel-preset-env 出现了，它的功能类似于 babel-preset-latest，它会根据目标环境选择不支持的新特性来转译。

stage-X (实验阶段 Presets)

• Stage 0 - 稻草人: 只是一个想法，可能是 babel 插件。
• Stage 1 - 提案: 初步尝试。
• Stage 2 - 初稿: 完成初步规范。
• Stage 3 - 候选: 完成规范和浏览器初步实现。
• Stage 4 - 完成: 将被添加到下一年度发布。