Babel是什么？

Babel是一个JavaScript编译器

Babel是一个工具链，主要用于将ECMAScript 2015+版本的代码转换为向后兼容的JavaScript语法，可以使之运行在当前和旧版本的浏览器或其他环境中。下面列出的是Babel能为你做的事情：
1.语法转换。
2.通过Polyfill进行语法特性缺失的填充(@babel/polyfill模块)
3.源码转换。

// Babel 输入： ES2015 箭头函数
[1, 2, 3].map((n) => n + 1);
// Babel 输出： ES5 语法实现的同等功能
[1, 2, 3].map(function(n) {
  return n + 1;
});

JSX 与 React

Babel 可转换 JSX 语法

npm install --save-dev @babel/preset-react

类型注释 (Flow&TypeScript)

Flow preset 和 TypeScript preset

npm install --save-dev @babel/preset-flow
npm install --save-dev @babel/preset-typescript

插件化

Babel 构建在插件之上。使用现有的或者自己编写的插件可以组成一个转换管道。通过使用或创建一个 preset 即可轻松使用一组插件。

配置 Babel

Babel 也有配置文件！其他工具都有类似的配置文件：ESLint (.eslintrc)、Prettier (.prettierrc)。

场景区分使用不同的配置文件：

你是否希望以编程的方式创建配置文件？
你是否希望编译 node_modules 目录下的模块？
[babel.config.js](https://www.babeljs.cn/docs/configuration#babelconfigjs) 文件可以满足。
需要一个简单的并且只用于单个软件包的配置
.babelrc 文件适合。
**官方推荐=>[babel.config.js](https://www.babeljs.cn/docs/configuration#babelconfigjs) **
四种配置方式：

`babel.config.js`

babel.config.js 文档

module.exports = function (api) {
  api.cache(true);

  const presets = [ ... ];
  const plugins = [ ... ];

  return {
    presets,
    plugins
  };
}

`.babelrc`

.babelrc 文档

{
  "presets": [...],
  "plugins": [...]
}

`package.json`

将 .babelrc 中的配置信息作为 babel 键（key）的值添加到 package.json 文件中

{
  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

`.babelrc.js`

与 .babelrc 的配置相同

onst presets = [ ... ];
const plugins = [ ... ];

module.exports = { presets, plugins };

插件

Babel 是一个编译器（输入源码 => 输出编译后的代码）。就像其他编译器一样，编译过程分为三个阶段：解析、转换和打印输出。

语法插件

这些插件只允许 Babel 解析（parse） 特定类型的语法（而不是转换）。

转换插件会自动启用语法插件。因此，如果你已经使用了相应的转换插件，则不需要指定语法插件。 .barlrc

{
  "parserOpts": {
    "plugins": ["jsx", "flow"]
  }
}

插件/Preset 路径

babel 会自动检查它是否已经被安装到 node_modules 目录下

{
  "plugins": ["babel-plugin-myPlugin"]
}

也可以相对路径

{
  "plugins": ["./node_modules/asdf/plugin"]
}

插件的短名称

如果插件名称的前缀为 babel-plugin-，可使用它的短名称：

{
  "plugins": [
    "myPlugin",
    "babel-plugin-myPlugin" // 两个插件实际是同一个
  ]
}
//带有冠名的也是同上
{
  "plugins": [
    "@org/babel-plugin-name",
    "@org/name" // 两个插件实际是同一个
  ]
}

插件顺序

插件在Preset之前。
插件顺序从前往后排列。
Preset顺序是倒序的（从后往前）。

插件参数

{
  "plugins": [
    [
      "transform-async-to-module-method",
      {
        //参数在这儿呢。
        "module": "bluebird",
        "method": "coroutine"
      }
    ]
  ]
}

预设（Presets）

preset 可以作为 Babel 插件的组合，甚至可以作为可以共享的 options 配置。

官方 Preset

我们已经针对常用环境编写了一些 preset：

Stage-X （实验性质的 Presets）

stage-x preset 中的语法转换会随着被批准为 JavaScript 新版本的组成部分而进行相应的改变（例如 ES6/ES2015）。
TC39 将提案分为以下几个阶段：

Stage 0 - 设想（Strawman）：只是一个想法，可能有 Babel插件。
Stage 1 - 建议（Proposal）：这是值得跟进的。
Stage 2 - 草案（Draft）：初始规范。
Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。
Stage 4 - 完成（Finished）：将添加到下一个年度版本发布中。

Preset 的排列顺序

Preset 是逆序排列的（从后往前）。

Babel知识点常见汇总