Babel 使用指南
在 Babel 工具链中有很多工具可以让您轻松使用 Babel,无论您是“最终用户”还是构建Babel本身的集成。
这将是对这些工具的快速介绍,您可以在文档的“使用”部分阅读更多关于它们的信息。
如果您使用的是框架,那么配置Babel的工作可能不同,或者实际上已经为您处理过了。请查看我们的Babel安装指南。
Babel 概述
本指南将向您展示如何将使用ES2015+语法的JavaScript应用程序代码编译成在当前浏览器中工作的代码。这将包括转换新语法和多填充缺少的特性。
设置此设置的整个过程包括:
1、运行以下命令安装软件包:
npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babel/polyfill
2、创建一个配置文件名为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 将 ./node_modules/.bin/babel 替换为 npx babel 来缩短该命令。
请继续阅读,逐步了解其工作原理,并介绍所使用的每个工具。
CLI 基本使用用法
您需要的所有Babel模块都作为单独的 npm 包发布在 @Babel 下(从第7版开始)。
这个模块化的设计允许使用各种工具,每个工具都是为特定的用例设计的。在这里我们将看到 @babel/core 和 @babel/cli 。
核心库
Babel的核心功能位于@Babel/core模块中。
安装后:
npm install --save-dev @babel/core
您可以直接在JavaScript程序中使用它,如下所示:
const babel = require("@babel/core"); babel.transform("code", optionsObject);
不过,作为最终用户,您可能希望安装其他工具,作为@babel/core的接口,并与开发过程很好地集成。即使如此,您可能仍然希望查看其文档页面以了解选项,其中大多数选项也可以通过其他工具设置。
CLI 工具
@babel/cli 是一个允许您从终端使用babel的工具。
下面是安装命令和一个基本用法示例:
npm install --save-dev @babel/core @babel/cli ./node_modules/.bin/babel src --out-dir lib
这将解析src目录中的所有JavaScript文件,应用我们告诉它的任何转换,并将每个文件输出到lib目录。由于我们还没有告诉它应用任何转换,输出代码将与输入相同(不保留确切的代码样式)。我们可以通过将它们作为选项传递来指定所需的转换。
我们使用了上面的--out dir选项。通过使用--help运行cli工具,可以查看该工具接受的其余选项。但现在对我们来说最重要的是——插件和——预设。
插件和预设
转换以插件的形式出现,插件是一些小的JavaScript程序,指导Babel如何对代码执行转换。您甚至可以编写自己的插件来将任何您想要的转换应用到您的代码中。要将ES2015+语法转换为ES5,我们可以依赖官方插件,如@babel/plugin transform arrow函数:
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+功能,我们希望进行转换。我们不需要一个接一个地添加我们想要的所有插件,我们可以使用一个“预设”,它只是一组预先确定的插件。
就像使用插件一样,您也可以创建自己的预设来共享所需插件的任何组合。对于我们这里的用例,有一个很好的预置名为env。
npm install --save-dev @babel/preset-env ./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
在没有任何配置的情况下,这个预设将包括所有支持现代JavaScript的插件(ES2015、ES2016等)。但预设也可以选择。与其从终端同时传递cli和预设选项,不如看看传递选项的另一种方式:配置文件。
配置
根据您的需要,有几种不同的方法可以使用配置文件。请务必阅读我们关于如何配置Babel的深入指南以了解更多信息。
现在,让我们创建一个名为babel.config.json的文件,其中包含以下内容:
const presets = [ [ "@babel/env", { targets: { edge: "17", firefox: "60", chrome: "67", safari: "11.1", }, }, ], ]; module.exports = { presets };
现在env预置将只为目标浏览器中不可用的特性加载转换插件。我们都准备好了语法。接下来让我们看看polyfills。
Polyfill
从Babel 7.4.0开始,这个包已经被弃用,因为它直接包含了核心js/stable(polyfill ECMAScript特性)和再生器运行时/运行时(需要使用transpiled生成器函数):
import "core-js/stable"; import "regenerator-runtime/runtime";
@babel/polyfill模块包括核心js和一个定制的再生器运行时,以模拟完整的ES2015+环境。
这意味着您可以使用新的内置函数,如Promise或WeakMap、静态方法(如Array.from或Object.assign)、实例方法(如Array.prototype.includes)和生成器函数(与再生器插件一起使用时)。polyfill将添加到全局范围以及本机原型(如String)中,以便执行此操作。
对于库/工具作者来说,这可能太多了。如果不需要Array.prototype.includes这样的实例方法,则可以使用transform运行时插件而不是@babel/polyfill来实现,而不会完全污染全局范围。
更进一步,如果您确切地知道需要polyfill的功能,可以直接从core js中获得它们。
既然我们正在构建一个应用程序,我们就可以安装@babel/polyfill:
npm install --save @babel/polyfill
注释:备份选项Instead of----save-dev as this is a polyfill that needs to run before your source code.
现在幸运的是,我们使用的是env预设,它有一个“useBuiltIns”选项,当设置为“usage”时,实际上将应用上面提到的最后一个优化,其中您只包括所需的polyfill。使用此新选项时,配置将更改如下:
{ "presets": [ [ "@babel/env", { "targets": { "edge": "17", "firefox": "60", "chrome": "67", "safari": "11.1", }, "useBuiltIns": "usage", } ] ] }
Babel现在将检查您的所有代码,查找目标环境中缺少的功能,并且只包括所需的polyfill。
例如,此代码:
Promise.resolve().finally();
会变成这样(因为Edge 17没有Promise.prototype.finally):
require("core-js/modules/es.promise.finally"); Promise.resolve().finally();
如果我们不使用env预设,并且将“ useBuiltIns”选项设置为“ usage”,则在所有其他代码之前,我们只需要在入口点一次完整填充即可。
摘要
我们使用@babel/cli 从终端运行Babel,使用@babel/polyfill来填充所有新的JavaScript功能,并且使用env预设仅包含我们使用的功能以及目标浏览器中缺少的转换和polyfill 。
有关使用构建系统,IDE等设置Babel的更多信息,请查看我们的设置指南。