Babel Usage Guide（用户指南）翻译

使用指南：

Babel提供了很多工具来使其用起来更为简单。下面的是一个快速指引，更多详情请查看文档的“用法”一章。

如果你在使用某种框架，Babel的配置方式可能不同，或者框架已经帮你进行了处理。这种情况下请查看我们的“可交互式安装指南”。

 

概述：

这份指南将会告诉你如何将你编写的使用了ES2015+语法的JS代码编译为现在浏览器支持的代码。这个过程包括转换新语法和填充缺失的特性。

 

总体步骤包括：

1.安装包：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

npm install --save @babel/polyfill

 

2.在项目根目录下创建babel.config.json

babel.config.json内容：

{
	"presets": [
		["@babel/env", {
			"targets": {
				"edge": "17",
				"firefox": "60",
				"chrome": "67",
				"safari": "11.1",
			},
			"useBuiltIns": "usage",
		}]
	]
}

浏览器清单只是随便举例。应根据实际需求调整。

 

3.运行以下命令将你所有的代码从src文件夹编译到lib文件夹

./node_modules/.bin/babel src --out-dir lib

你可以使用npm@5.2.0中的npm package runner来缩短命令（使用npx babel替换掉./node_modules/.bin/babel）

以上就是babel完整的使用步骤了，是不是很简单？

 

下面对以上的步骤和使用到的工具进行详细介绍。

 

基本用法（使用CLI）

所有的Babel模块都以独立的npm包形式发布，这些包都被归集到@babel空间下（从version 7开始）。这种模块化的设计可以让不同的工具针对性地满足特定的功能需求。我们先看@babel/core和@babel/cli

 

核心库

Babel的核心功能都放在@babel/core模块里面。安装后：

npm install --save-dev @babel/core

你就可以直接在js中require包然后使用：

const babel = require("@babel/core"); 

babel.transform("code", optionsObject);

尽管在开发过程中你可能更多地通过其他工具来使用@babel/core，以便和你的开发流程更好地结合在一起，但你可能仍需要看看@babel/core的文档页来学习了解它的配置选项。大多数的配置选项也可以通过其他工具来进行设置。

 

CLI工具

@babel/cli是一个控制台命令工具，可以让你在控制台中使用babel。

以下是安装命令和一个基础用例：

npm install --save-dev @babel/core @babel/cli 

./node_modules/.bin/babel src --out-dir lib

执行后将会把src目录中的所有js文件按照我们设定的方式进行转换，然后输出到lib目录中。由于我们没有设定任何的转换方式，输出的代码将会和输入的代码一样（只是代码书写样式不会保留）。我们可以通过设置配置选项来指定我们需要的转换方式。

在上面命令中我们使用 --out-dir 配置命令。你可以通过 --help命令来查看cli工具中的其他可配置项。但是目前对我们来说最重要的配置项是 --plugins 和 --presets

 

插件和预设环境

plugins是小型的js程序，用来指示Babel应该如何转换代码。你甚至可以自己写一个插件来按你自己的想法转换代码。我们可以使用官方插件来把ES2015+的语法转为ES5语法，例如

@babel/plugin-transform-arrow-functions:

npm install --save-dev @babel/plugin-transform-arrow-functions 

./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions

现在我们代码中的箭头函数都会被转为ES5兼容的函数表达式了：

const fn = () => 1; 

// converted to 

var fn = function fn() { 

     return 1; 

};

现在我们有了一个不错的开始，但是我们代码中还有其他ES2015+的特性需要转换。如果一个个添加我们需要的所有插件那就太麻烦了，作为代替方案，我们使用“preset”（预设），也就是预先制定好的一系列的插件。

就像使用插件一样，你也可以创建你自己的预设集来分享你的插件组合。就我们目前的需求来看，现在就有一个优秀的预设集叫做“env”可以满足我们的需求。

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

./node_modules/.bin/babel src --out-dir lib --presets=@babel/env

不需要任何的配置，这个预设集就会包括支持现代JS版本（ES2015、ES2016等）的所有插件。当然预设集也是可以进行配置的。你可以通过控制台配置参数，但是这样的话控制台中可能同时存在cli的配置项和preset的配置项。因此，我们可以通过另外一种方式：配置文件，来进行preset的配置。

 

配置

根据需求的不同，目前有几种不同的方式来使用配置文件。想要了解更多信息，请务必阅读我们的深入Babel配置教程。

现在让我们创建一个文件名为babel.config.json的文件，然后输入如下内容：

const presets = [
    ["@babel/env", {
        targets: {
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1",
        },
    }, ],
];

module.exports = { presets };

现在env 预设集就只会加载我们目标浏览器中不支持特性的转换插件了。

以上都是语法转换方面的设置，接下来我们看一下特性填充（polyfill）

 

Polyfill

 

注意，在Babel7.4.0中，以下@babel/polyfill package已经废弃了，建议直接引用core-js/stable（用于填充ECMAScript 特性）和regenerator-runtime/runtime（生成器方法generator functions需要的）

import "core-js/stable";

import "regenerator-runtime/runtime";

@babel/polyfill 模块包括core-js和一个自定义的regenerator runtime 来模拟一个完整的ES2015+的环境。

这意味着你可以使用新的内建特性（像是Promise 或 WeakMap），静态方法（像是Array.from或者Object.assign），实例方法（像是Array.prototype.includes），还有生成器方法（generator functions，ES6新特性，需要同时使用regenerator plugin）。原理是在全局对象域和原型对象（prototype）上添加polyfill代码来实现的。

对于library/tool作者来说这可能有点太多了。如果你不需要类似Array.prototype.includes的实例方法，你可以使用transform runtime plugin来取代@babel/polyfill，这样就不会污染全局对象了。

 

更进一步的说，如果你准确地知道你所需填充的特性是什么的话，你可以直接从core-js中require它们。

 

因为我们创建的是一个application（而不是libraty），我们可以直接安装@babel/polyfill：

npm install --save @babel/polyfill

注意使用--save 而不是 --save-dev，因为这是你的源代码运行所依赖的polyfill环境。

幸运的是，env预设集有一个“useBuiltIns”选项，当配置为“usage”时，将会使用上文所提及的最优方案只引入你需要的polyfill特性。加上这个新的配置项后配置就变成了：

{
    "presets": [
        ["@babel/env", {
            "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "67",
                "safari": "11.1",
            },
            "useBuiltIns": "usage",
        }]
    ]
}

这样Babel就会检查你的代码中所有在目标环境下缺失的特性，然后引入所需要的polyfill。

举个例子来说：

Promise.resolve().finally();

将会变成下面这样（因为Edge17没有Promise.prototype.finally）

require("core-js/modules/es.promise.finally"); 

Promise.resolve().finally();

 

如果我们在env预设集中不使用useBuiltIns并将其设置成“usage”，我们就需要在程序的入口，在其他任何代码执行之前，require完整的polyfill（只需要引一次）。

 

总结

使用@babel/cli在控制台运行Babel

使用@bable/polyfill来填充新的js特性

使用env预设环境来转换（通过插件）和填充（通过polyfill）目标浏览器中缺失的特性。

了解更多Babel在你所使用的构建系统、IDE等中的设置，请查阅我们的 可交互式安装指南。