看懂 Babel 官网，学会使用 Babel

前端的东西真是又多又杂，好多的工具，平时用到就是简单的对着官网配置下，不深入了解就比较蒙圈。Babel 就是其中一个，如果你用 Vue 会很少遇到这个东西，因为 Vue 很好的给你集成了，比较多的能遇见 Babel 的地方是 NodeJs 项目和 React 项目可能会需要手动配置。

babel中文官网
先来看看官网的开门注：

1. Babel is a JavaScript compiler
2. Use next generation JavaScript, today.

总结下：Babel 就是个 JavaScript 编译器，能让开发者使用最新的 JavaScript 进行开发。

一、Babel 是什么？

Babel 是一个 JavaScript 编译器，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行低版本的浏览器中。

1.1 使用 Babel 的地方

1. ES6+ 语法
2. JSX 语法，Babel 能够转换 JSX 语法！
3. 类型注释 (Flow 和 TypeScript)，Babel 可以删除类型注释！

1.2 Babel 的优点

1. Babel 构建在插件之上。插件又可以分为：
   • 预设（preset）：插件的封装版
   • 插件（plugin）：一个个转换插件
2. 可调试
   由于 Babel 支持 Source map，因此你可以轻松调试编译后的代码。
3. 符合规范
   Babel 尽最大可能遵循 ECMAScript 标准。不过，Babel 还提供了特定的选项来对标准和性能做权衡。
4. 代码紧凑
   Babel 尽可能用最少的代码并且不依赖太大量的运行环境。
   有些情况是很难达成的这一愿望的，因此 Babel 提供了 "loose" 参数，用以在特定的转换情况下在符合规范、文件大小和速度之间做折中。

1.3 Babel6 与 Babel7 的差别

1. babel6 的插件名字大多为：babel-cli、babel-core。Babel7 的命名为：@babel.cli、@babel/core
2. babel6 的配置文件为 :.babelrc ，babel7 的配置文件主要为：babel.config.json/babel.config.js或.babelrc.json/.babelrc.js

1.4 Babel 配置文件

配置文件的写法粗分三种，细分五种：

• babel.config.json/babel.config.js
• .babelrc.json/.babelrc.js
• package.json

1.4.1 babel.config.json在项目的根目录（在此处package.json）中创建一个名为以下内容的文件。

• JSON 格式：

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

• Javascript 格式：

module.exports = function (api) {
  api.cache(true);//不能省略

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

  return {
    presets,
    plugins
  };
}

查看babel.config.json文档以查看更多配置选项。

1.4.2 .babelrc.json/.babelrc.js

.babelrc.json 在项目中创建一个包含以下内容的文件。

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

Javascript 格式：

module.exports = function (api) {
  api.cache(true);//不能省略

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

  return {
    presets,
    plugins
  };
}

1.4.3 package.json

package.json 里面配置 babel 字段：

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

以上是配置文件的写法，除此之外还有两种方式能使用插件和预设：

1、命令行方式，使用CLI（@babel/cli）

在安装 @babel/core 和 @babel/cli 的前提下，使用 @babel/plugin-transform-arrow-functions 插件：

babel --plugins @babel/plugin-transform-arrow-functions script.js

查阅babel-cli文档以查看更多配置选项。

2、 使用API​​（@babel/core）

此方式推荐在 NodeJs 中使用：

const code = `
  const fun = () => {};
`;
const result = require("@babel/core").transform(code,{
  plugins: ["@babel/plugin-transform-arrow-functions"]
});

console.log(result.code);

最后在命令行输入 node script.js 得到结果：

E:\BaiduNetdiskDownload\babel_study>node index.js
const fun = function () {};

箭头函数已经被替换。

二、Babel 的使用

一个一个来介绍，首先出场的是 Babel 的核心，@babel/core：新建一个 index.js 文件，内容为：

const code = `
  const fun = () => {};
`;
const result = require("@babel/core").transform(code,{
  plugins: ["@babel/plugin-transform-arrow-functions"]
});
//@babel/plugin-transform-arrow-functions 箭头函数转换为关键字函数
console.log(result.code);

使用 node 调试，命令行输入 node script.js 得到结果：

E:\BaiduNetdiskDownload\babel_study>node index.js
const fun = function () {};

箭头函数已经被替换。

现在我们需要使用命令行进行调试，安装 @babel/cli，终端输入：npx babel --help 查看所有命令，发现这四条：

--presets [list]                            A comma-separated list of preset names.
--plugins [list]                            A comma-separated list of plugin names.
-o, --out-file [out]                        Compile all input files into a single file.
-d, --out-dir [out]                         Compile an input directory of modules into an output directory.

更改 index.js 文件的内容为：

const fun = () => {};

这时调用终端调试：

npx babel index.js -o a.js --plugins=@babel/plugin-transform-arrow-functions

打开 a.js ，箭头函数转换成功：

const fun = function () {};

一般情况下都是 Babel 命令行配合配置文件使用。

三、Babel 插件和预设