什么是 babel-plugin-transform-runtime？
babel-plugin-transform-runtime 是一个 Babel 插件，可以将 ES6 或更高版本的代码转换成兼容性更好的 ES5 代码。和其他 Babel 插件不同的是，babel-plugin-transform-runtime 会使用运行时方式来转换某些较新的特性，而不是在编译时期将代码直接转换成目标代码。
babel-plugin-transform-runtime 插件需要和 babel-runtime 库一起使用。这个库包含了一些实现浏览器不支持的新特性的代码，使得我们可以在不修改全局对象的前提下使用新特性。
如何使用 babel-plugin-transform-runtime？
下面是使用 babel-plugin-transform-runtime 的一些典型用例：
在 webpack 中使用
在 webpack 中使用 babel-plugin-transform-runtime 插件，需要安装这个插件以及 babel-runtime：
npm install babel-plugin-transform-runtime babel-runtime --save-dev
同时添加新的 plug-in 到 .babelrc 文件：
-- -------------------- ---- -------
-
---------- -
--------------------- -
--------- --
---------- -----
-------------- -----
--------------- -----
--
-
-其中，corejs 是指定 core-js 的版本，useESModules 是指定是否将转换后的代码转换为 ES Modules 的形式。
在 babel-cli 中使用
在 babel-cli 中使用 babel-plugin-transform-runtime 插件，同样需要安装该插件及 babel-runtime：
npm install babel-cli babel-plugin-transform-runtime babel-runtime --save-dev
同样需要在 .babelrc 文件中添加新的 plug-in：
-- -------------------- ---- -------
-
---------- -
--------------------- -
--------- --
---------- -----
-------------- -----
--------------- -----
--
-
-在 babel-register 中使用
在 babel-register 中使用 babel-plugin-transform-runtime 插件，同样需要安装该插件及 babel-runtime：
npm install babel-register babel-plugin-transform-runtime babel-runtime --save-dev
由于在使用 babel-register 时，Babel 在运行时才会编译和转换代码，因此只需在 Node.js 启动时引入 babel-register 即可：
-- -------------------- ---- -------
---------------------------
-------- -
--------------------- -
--------- --
---------- -----
-------------- -----
--------------- -----
--
-
---babel-plugin-transform-runtime 的优劣势
babel-plugin-transform-runtime 的优势在于它不会污染全局变量。相反，它会在运行时期将较新特性的代码转换成旧版代码，从而避免了在全局环境下添加新的 API。
另一个优势是，在打包后的文件中，方法只会被定义一次，而不会像其他转换插件将同一段代码重复替换。
然而，使用 babel-plugin-transform-runtime 将会稍稍增加文件大小及运行时间。这是由于插件不仅仅只是在编译时期转换代码，还需要在运行时期替换和添加代码。
示例
以下是使用 babel-plugin-transform-runtime 和 async/await 语法的示例代码：
async function foo() {
const res1 = await fetch('/data/json1.json');
const res2 = await fetch('/data/json2.json');
console.log(res1, res2);
}转换前代码：
"use strict";
async function foo() {
const res1 = await fetch('/data/json1.json');
const res2 = await fetch('/data/json2.json');
console.log(res1, res2);
}转换后代码：
-- -------------------- ---- -------
---- --------
--- ------------ - -------------------------------------
--- ------------- - -------------------------------------
--- ------------------ - --------------------------------------------------
--- ------------------ - -------------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
-------- ----- -
------ ---------------- -----------
-
-------- ------ -
---- - --- ---------------------------- ------------------------------------------------ --------- -
--- ----- -----
------ ----------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ --------------------------
---- --
---- - --------------
------------- - --
------ --------------------------
---- --
---- - --------------
----------------- ------
---- --
---- ------
------ ----------------
-
-
-- -------- ------
----
------ ---------------- -----------
-总结
babel-plugin-transform-runtime 是一个很有用的 Babel 插件。如果你使用了 ES6 或更高版本的 JavaScript，它能够帮助你将代码转换成可以在浏览器中运行的 ES5 代码，并保持全局对象的干净。如果你需要美观和干净的代码，并且想要避免全局变量的污染，那么你可以考虑使用 babel-plugin-transform-runtime 来转换你的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6480156648841e9894f94b7a
