BabelJs - ES6 代码执行

BabelJS - 确保现代 JavaScript 代码的执行

BabelJS 作为一个 JavaScript 转译器（transpiler），使开发者能够使用最新的 ECMAScript 特性（ES2015/ES6 及更新版本）编写代码，然后将其转换为一个更旧、更广泛兼容的 JavaScript 版本，通常是 ES5。这一点至关重要，因为虽然现代浏览器迅速采用新的 JavaScript 特性，但旧浏览器或特定环境（如旧版本的 Node.js）可能不支持这些特性，导致语法错误或意外行为。

现代 JavaScript 引入了许多强大的特性，例如箭头函数（arrow functions）、类（classes）、Promises、async/await、解构（destructuring）等。使用这些特性可以显著提高代码的可读性、可维护性和开发效率。然而，如果这些现代代码直接在不理解这些语法的环境中执行，就会失败。

BabelJS，通过适当的 presets（如 @babel/preset-env）和 plugins 配置后，弥合了这一差距。它解析你的现代代码，并输出遵循旧 JavaScript 规范（例如 ES5）的等效代码，该规范在各种浏览器和 JavaScript 环境中几乎得到普遍支持。

让我们来看一个使用 ES2015 箭头函数的简单示例。

场景：使用箭头函数

想象你有一个如下所示的 HTML 文件：

<!DOCTYPE html>
<html>
<head>
  <title>BabelJS Execution Test</title>
</head>
<body>
  <script src="index.js"></script>
</body>
</html>

你的 index.js 文件包含一个箭头函数：

现代代码 (`index.js`)

const greet = (name) => {
  return `Hello, ${name}!`;
};

alert(greet("Modern World"));

在不同浏览器中的行为（不使用 Babel）

如果你在现代浏览器（如最新版本的 Chrome、Firefox、Edge、Safari）中打开这个 HTML 文件，箭头函数会正常工作，你会看到一个弹窗提示：“Hello, Modern World!”。

然而，如果你尝试在不支持箭头函数的非常旧的浏览器中运行此代码（例如，未经过转译的 Internet Explorer 11），你将会遇到 JavaScript 语法错误，脚本将无法执行。

解决方案：使用 Babel 进行转译

为了确保这段代码能在任何地方工作，我们使用 Babel 转译 index.js。首先，请确保你已完成 Babel 的设置（请参阅前面的章节）：

安装 Babel 包：

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

创建 babel.config.json 文件：

{
  "presets": ["@babel/preset-env"]
}

转译代码：

npx babel index.js --out-file index_compiled.js

这将创建 index_compiled.js 文件。

转译后的代码 (`index_compiled.js`)

"use strict";

var greet = function greet(name) {
  return "Hello, ".concat(name, "!");
};

alert(greet("Modern World"));

现在，更新你的 HTML 文件，使用编译后的文件：

<!DOCTYPE html>
<html>
<head>
  <title>BabelJS Execution Test</title>
</head>
<body>
  <script src="index_compiled.js"></script>
</body>
</html>

在不同浏览器中的行为（使用 Babel）

现在，如果你打开这个更新后的 HTML 文件：

现代浏览器（Chrome、Firefox 等）：代码将正常工作，显示弹窗提示：“Hello, Modern World!”。
旧浏览器（如 IE11）：代码也将正常工作，因为它现在是 ES5 兼容的，显示相同的弹窗提示。

为什么这很重要？虽然支持像 IE11 这样非常旧的浏览器的需求正在减少，但企业通常有要求支持特定的浏览器版本或确保在不同的用户环境中保持一致的行为。Babel 允许开发团队利用现代 JavaScript 的优势，同时又不牺牲兼容性。

此外，Babel 不仅用于浏览器环境。它也用于 Node.js 开发，使开发者能够使用最新的 JavaScript 特性，即使目标 Node.js 版本不完全原生支持它们。@babel/preset-env 可以通过配置 targets 来指定你需要支持哪些浏览器版本或 Node.js 版本，Babel 将相应地调整其输出。

核心要点：BabelJS 是现代 JavaScript 生态系统中一个至关重要的工具，它帮助开发者编写面向未来的代码，同时保持与各种执行环境的兼容性。

常见陷阱：Babel 主要转换语法。对于新的内置对象（例如 Promise、Map、Set）或内置对象上的新实例方法（例如 Array.prototype.includes），你需要 polyfills。请参阅关于 Polyfills 的章节，了解 @babel/preset-env 和 core-js 如何解决这个问题。