Babel 初学者指南

suchonaseo

本文介绍了Babel，一个 JavaScript 编译器，它允许开发人员今天使用下一代 JavaScript。构建 Web 应用程序时编写 JavaScript 可能会令人沮丧。我们必须考虑我们目标浏览器中可用的功能以及未实现功能时会发生什么。有些人会建议干脆不使用它，如果我们正在构建复杂的东西，这在大多数时候都是痛苦的经历。 值得庆幸的是，有些工具让我们不必担心支持什么，而可以编写最好的代码。它们被称为转译器。转译器是一种将源代码作为输入并生成新源代码作为输出的工具，其语法不同，但在语义上尽可能接近或理想地等效于原始代码。 Babel 几乎是标准的转译器，用于将现代 JavaScript (ES2015+) 转换为在旧浏览器中运行的兼容实现。如果您只想专注于编写 JavaScript，那么这是完美的解决方案。

尽管 Babel 的主要目标是为旧的（有时是当前的）浏览器翻译 ECMAScript (ES) 的最新标准，但它可以做更多的事情。有一个预设和插件的生态系统，也可以添加非标准功能。每个插件都为您的代码提供了一个新功能/转换，而预设只是插件的集合。 入门 Learn to Code with JavaScript 根据您 WhatsApp 号码数据 的项目和使用的工具，设置 Babel 有不同的方法。在本文中，我们将解释如何使用 CLI 设置 Babel，不过如果您使用构建系统或框架，您可以在官方网站上查看具体说明。大多数时候，CLI 是最快、最简单的入门方式，因此，如果您是首次使用，请随时继续。 在项目中设置 Babel 的第一步是使用 npm 安装包并将其添加为开发依赖项。假abel-test) 更改为该目录，初始化一个 npm 项目（从而创建一个package.json文件），然后安装 babel-cli 作为开发依赖项。



如果您需要上述方面的任何帮助，请参阅我们有关安装 Node和使用 npm 的教程。 接下来，我们可以打开命令package.json并将其添加build到 npm 脚本中： "scripts": { "build": "babel src -d dist" } 这将从目录中获取源文件src并将结果输出到dist目录中。然后我们可以执行它： npm run build 可是等等！在运行 Babel 之前，我们必须安装并设置将转换我们的代码的插件。最简单、最快的方法是添加Env 预设，它根据您指定的目标浏览器选择适当的插件。可以使用以下方式安装： Learn to Code with JavaScript npm install babel-preset-env --save-dev 然后在项目的根目录中创建一个.babelrc文件并添加预设： { "presets": ["env"] } 该.babelrc文件是放置 Babel 所有设置的地方。您将主要使用它来设置预设和插件，但还有更多选项可用。