如何使用 Babel 转译 Node.js 应用程序
在现代化的前端开发中，使用 ES6 或更高版本的语法来编写 JavaScript 代码已经成为了越来越普遍的趋势。然而，这些新特性并不是所有的浏览器或 Node.js 版本都支持的，为了让代码能够在更多的环境下运行，我们需要将其转译为传统的 ES5 语法。在这种情况下，Babel 是一个非常好的选择。
Babel 是一个 JavaScript 编译器，可以将 ES6/ES7/ES8 等新特性的语法转译为 ES5 语法，从而可以在更广泛的浏览器和环境中运行。在本文中，我们将介绍如何使用 Babel 转译 Node.js 应用程序。
前置条件
在学习如何使用 Babel 转译 Node.js 应用程序之前，我们需要先安装一些依赖包，包括 Babel 和一些相关的工具和插件，具体的安装命令如下：
npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env
在此，我们安装了 @babel/core 作为 Babel 的核心包，@babel/cli 作为 Babel 的命令行工具，@babel/node 作为 Node.js 的 REPL 环境，和 @babel/preset-env 作为预设插件（preset plugin），它将帮助我们在转译时自动识别出需要转换的 ES6+ 语法特性，并提供相应的转换处理。
配置 Babel
在安装完 Babel 和相关依赖包后，我们需要在项目中创建一个名为 .babelrc 的配置文件，用来指定 Babel 的转译规则。在这个文件中，我们要添加一个名为 @babel/preset-env 的项目，并将其设为转译的预设选项，示例如下：
{ "presets": ["@babel/preset-env"] }
这里，presets 是一个数组，它告诉 Babel 转译器使用哪些插件来处理代码。在这种情况下，我们只需使用 @babel/preset-env 插件即可。
转译 Node.js 应用程序
在配置好 Babel 后，我们就可以开始对 Node.js 应用程序进行转译。下面是一个示例应用程序：
// index.js const message = 'Hello World!'; console.log(message);
如果我们直接运行这个应用程序，控制台将输出 Hello World!：
node index.js
现在，我们可以使用 Babel 来转译这个应用程序，转译后的代码将会被自动保存在 dist/index.js 文件中，如下：
npx babel index.js --out-dir dist
转译后的代码如下所示，它把 const 声明转换成了 var 声明，这样它就可以在 ES5 环境下使用了：
// dist/index.js 'use strict'; var message = 'Hello World!'; console.log(message);
通过以上操作，我们成功使用 Babel 对 Node.js 应用程序进行了转译，它们可以在 ES5 环境下运行了。
使用 Babel Node REPL 环境
除了转译应用程序外，Babel 还提供了一个 REPL（Read–Eval–Print Loop）环境，该环境将源代码转译为 ES5 代码后立即执行，可以在开发时进行交互式的测试和调试。
我们可以使用以下命令来启动 Babel Node REPL 环境：
npx babel-node
然后，在命令行中输入任何源代码，它都会被解析和转译成 ES5 代码，并在控制台中输出结果，示例如下：
-- -------------------- ---- ------- - ----- ------- - ------ -------- --------- - - --------------------- -------- --------------------- - --------------- ------- -- --- ------- -- ---- ----- -- ----------- ---------------------------------------------------------------- ----------------- -- ---------------------- ---------------- -- ----- ------------------ -- ------------------- --- ----- ------------------ -- ----------------- ---------------- -- --------------- ------------------ -- ---------------------------- ------------------ -- ---------------------------- -------------------- -- -------------------------- ------------------- -- ------------------------------ --------------------- - ----- ------------------------- ------ ----------- ------- -- --- -------- -展开代码
可以看到，Babel Node REPL 环境把源代码转换成 ES5 代码，但是它无法识别和调用 message 变量，这是因为变量的作用域限制在了 REPL 中。我们可以使用 var, let 或者 const 重新声明变量，如下：
> let message = 'Hello World!'; undefined > > console.log(message); Hello World! undefined
现在，我们对 Babel 的应用已经有了更好的认识，希望这篇文章能够帮助到你学习和使用 Babel，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67baee6c306f20b3a6a1a900
