Babel 使用教程

发布时间：2023-04-12 08:44:26 所属栏目：教程来源：

导读：在 Babel 工具链中有很多工具可以让您轻松使用 Babel，无论您是“最终用户”还是构建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。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!