Babel知识点常见汇总

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：

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

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 是逆序排列的（从后往前）。