使用指南:
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等中的设置,请查阅我们的 可交互式安装指南。