前言
在现代 JavaScript 开发中，我们通常使用 Babel 转换器将 ES6 代码转换为 ES5 以便让旧版浏览器也能运行我们的代码。然而，这并不是全部。在一些特殊的场景中，Babel 也需要学习如何扩展语言能力。这时，Babel 运行时和插件就变得非常重要了。
本文将会详细讲解 Babel 运行时以及插件，并使用一个实际的例子来演示如何使用它们来扩展你的语言能力。
Babel 运行时 babel-runtime
Babel 运行时是一个可重用的工具库，它包含了一些 ES5 的 helpers 方法，这些方法可以帮助你的代码在不同的运行环境中运行。比如，当你使用 ES6 的 class 关键字时，需要从 Babel 的 babel-runtime 引入 inherits 方法，以保证该方法能在所有的运行环境中正确运行。不过需要注意的是，babel-runtime 是一个运行时库，也就是说你不能再你的代码中将其打包进去，而需要作为一个单独的包或者库安装。
Babel 运行时的目标是减少代码的重复量。因为相同的 helpers 方法在不同的文件中可能会包含且被重复使用，这将会导致最终打包出来的代码变得更大。而 Babel 运行时则将常用的 helpers 方法都统一起来，以便让使用者引入这些方法，而不用为了使用这些方法而去重复编写代码。
Babel 插件 babel-plugin-transform-runtime
Babel 插件 babel-plugin-transform-runtime 是一个将 ES6 代码转换为 ES5 代码的插件。同样地，它也是一个减少代码重复量的工具。它会将你在代码中需要用到的 helpers 方法抽离出来，生成一个单独的、可选择性引入的模块，这样就可以在所有文件中被共享使用，从而减少了重复编写代码所需的时间和精力。
在使用 babel-plugin-transform-runtime 的同时，还需要配合使用 babel-runtime。因为在 babel-plugin-transform-runtime 中处理的 helpers 方法并不是直接在代码中显式地引入的，而是动态生成并注入的。而这些转换后的代码需要依赖于静态的 babel-runtime，以便这些代码能够在多个模块之间正常地进行调用。
示例代码
为了更好地理解 Babel 运行时和插件，下面我们使用一个实际的案例来演示如何使用它们来进行代码的管理和复用。
首先我们在终端中，通过 npm 安装必要的库：
npm install --save-dev babel-runtime babel-plugin-transform-runtime
接着，我们编写代码文件 index.js：
-- -------------------- ---- -------
----- --- -
------------- -
--------- - -------
-
------ ----- -
------------------- ------ --------
-
-这段代码包含了 ES6 的 class 关键字。为了使得这笔代码能够在早期的浏览器中运行，我们需要使用 babel-plugin-transform-runtime 将其转换为 ES5 代码。使用 babel-plugin-transform-runtime 会消耗一些开销，因此我们需要安装 babel-preset-env 这个预设，以便告诉 Babel 你想要使用的 JavaScript 版本：
npm install --save-dev babel-preset-env
以上准备工作完成后，接下来我们需要在 Babel 的配置文件 .babelrc 中进行相关配置：
{
"presets": ["env"],
"plugins": ["transform-runtime"]
}在配置文件中，我们使用了 env 预设和 transform-runtime 插件。现在我们就可以通过执行以下命令对 index.js 文件进行编译：
./node_modules/.bin/babel ./src/index.js -d ./lib
我们运行该命令后，系统会自动将 ES5 代码输出到 ./lib/index.js 文件中：
-- -------------------- ---- -------
--- ------------ - ---------------------------------------------
--- --------------- - ------------------------------------------------
--- --- - -------- -- -
-------- ----- -
--------------------- -----
--------- - -------
-
----------------- ----- --
---- ------
------ -------- ----- -
------------------- ------ --------
-
----
------ ----
----可以看到，在编译后的代码中，我们依然使用了 Foo 类，同时也调用了其中定义的 static 方法。而与之对应的，我们得到了一个独立的 babel-runtime 包用于支持动态引入的 helpers 方法。因此，在实际应用中，当我们的项目中引用了多个文件时，我们就可以使用这个独立的 babel-runtime 帮助我们引入这些公用的 helpers 方法，从而达到优化代码量和降低代码复杂度的目的。
总结
在本文中，我们对 Babel 运行时和插件进行了详细的讲解，并通过实际案例的方式演示了如何使用它们来帮助我们更好地管理和复用代码。在实际开发中，我们通常需要使用到最新的 JavaScript 语法和特性，而使用 Babel 就是我们实现这一目标的有力工具。因此，我们需要学习和掌握 Babel 的相关知识，以便更好地应用它来进行代码开发和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6470b11e968c7c53b0ece4c3