摘要： 本文将会介绍 Babel 插件 transform-runtime 会引发的代码污染问题，以及如何使用 @babel/plugin-transform-runtime 插件解决这个问题。同时，本文还将通过示例代码和实际的案例来说明该插件的使用方法和注意事项。
1. 问题背景
随着 ECMAScript 新特性的不断推进，我们在编写 JavaScript 代码时经常需要使用到一些新的语法和 API，如 Promise、async/await 等。这些新特性虽然能够提高我们的编码效率和代码可读性，但是它们并没有被所有的浏览器所支持。为了解决这个问题，我们往往需要使用 Babel 等工具对代码进行转换。
在使用 Babel 进行代码转换时，我们往往需要使用到 transform-runtime 插件，这个插件能够自动引入一些运行时的辅助函数，从而使语法转换后的代码能够在不支持 ECMAScript 新特性的浏览器上运行。但是，这个插件在处理某些情况下会引发代码污染问题，本文将会详细介绍该问题，并提供相应的解决方案。
2. 问题描述
使用 Babel 进行代码转换时，我们经常需要使用到如下的配置样例：
-- -------------------- ---- -------
-
---------- ------
---------- -
----------------------------------- -
--------- ------
---------- -----
-------------- -----
--------------- -----
--
-
-这个配置的作用是在转换过程中添加 transform-runtime 插件，并为插件提供一些参数。
但是，如果你的代码中引用了一些第三方库或自己写的基础库，需要使用到 ES6 的类或者 Promise 等方法，那么使用 transform-runtime 插件就有可能会引发代码污染问题。例如，我们在某个库中定义了如下的类：
-- -------------------- ---- -------
----- ----------- -
------------- -
-----
-
------------- -
-----
-
-然后，在另一个文件中，我们使用了该库中的这个类：
-- -------------------- ---- -------
------ ----------- ---- ---------------
----- -------------- ------- ----------- -
------------- -
--------
-----
-
-使用 transform-runtime 插件对上述代码进行转换后，会得到如下的代码：
-- -------------------- ---- -------
---- --------
--- ---------------------- - --------------------------------------------------------
--- ------------ - ------------------------------------------------
--- -------------- - ------------------------------------------------
--- ---------------------- - --------------------------------------------------------
-------- --------------------- - ------ -------- -- - --- ----- - ------------------------- ------- -- ----------------------------- - --- --------- - ---------------------------------- ------ - ------------------------ ---------- ----------- - ---- - ------ - ----------------- ----------- - ------ -------------------------------- -------- -- -
-------- -------------------------------- ----- - -- ----- -- ------- ---- --- -------- -- ------ ---- --- ------------ - ------ ----- - ------ ----------------------------- -
-------- ---------------------------- - -- ----- --- ---- -- - ----- --- -------------------- ------ ---- ----------- - ------- ------ ---- --------- - ------ ----- -
-------- ------------------ - --------------- - --------------------- - --------------------- - -------- ------------------ - ------ ----------- -- ------------------------- -- ------ ------------------- -
-------- --------------------------- - -- ------- ------- --- ----------- -- ------------------- ------ ------ -- ------------------------ ------ ------ -- ------- ----- --- ----------- ------ ----- --- - ---------------------------------------------------- --- -------- -- ----- ------ ----- - ----- --- - ------ ------ - -
--- -------------- - --------------------- -------------- -
---- --------
------------------------------ --------------
--- ------ - -----------------------------
-------- ---------------- -
------ ------------------------ ---------- -- -----
-
--- ------ - -------------------------
------------- - -------- -------- -
-----
--
------ ---------------
------------------------可以发现，在 transform-runtime 插件的处理下，代码中多了许多 runtime 模块中的函数调用，这样会导致代码体积变大，可读性变差，并且也会对代码的性能产生一定的影响。
3. 解决方案
为了解决 transform-runtime 插件引发的代码污染问题，我们可以使用 @babel/plugin-transform-runtime 插件。使用该插件时，我们需要在项目中安装 @babel/runtime 和 @babel/runtime-corejs3 这两个库。
安装完成后，我们需要修改 babel 配置文件中 transform-runtime 部分的配置：
-- -------------------- ---- -------
-
---------- ------
---------- -
----------------------------------- -
--------- --
--------------- -----
------------------ ------
---------- -----
-------------- ----
--
-
-在上述配置中，我们使用了 useESModules：true 参数，该参数用于为插件提供全局（polyfill）模式之外的支持，从而减少了不必要的代码转换和运行时助手的使用。除此之外，我们还设置了 corejs： 3，用于低版本浏览器中缺失的新 API 和语言特性的提供支持。
使用 @babel/plugin-transform-runtime 插件时，需要注意手动安装两个 runtime 库 @babel/runtime 和 @babel/runtime-corejs3，否则转换后的代码可能无法正常运行。
4. 实例演示
下面我们使用一个示例来演示如何使用 @babel/plugin-transform-runtime 插件解决 transform-runtime 插件引发的代码污染问题。
首先，我们创建一个基础库：
-- -------------------- ---- -------
----- ----------- -
------------- -
-----
-
------------- -
-----
-
-
-------------- - ------------接着，我们创建一个子组件库，其中使用到了基础库中的 MyComponent 类：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- -------------- ------- ----------- -
------------- -
--------
-----
-
-
-------------- - ---------------最后，我们编写代码进行测试，如下所示：
const ChildComponent = require('child-component');
const component = new ChildComponent();
component.doSomething();如果我们使用 transform-runtime 插件进行处理，那么转换后的代码可能会变成这样：
-- -------------------- ---- -------
---- --------
---------------------------------------------
--------------------------------------
--------------------------------------------------------
------------------------------ ------------- -
------ ----
---
--------------- - ---- --
--- ------------ - ------------------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
--- -------------- - --------------------- -------------- -
---- --------
--- ---------------------------------------- --------------
--- ------ - -----------------------------
-------- ---------------- -
------ ------------------------ ---------- -- -----
-
--- ------ - -------------------------
------------------ - -------- ------------- -
-----
--
------ ---------------
------------------------
--------------- - ---------------可以看到，在转换后的代码中，多了很多不必要的 runtime 函数调用，代码污染严重，但是如果我们使用 @babel/plugin-transform-runtime 插件，转换后的代码将会变得干净许多：
-- -------------------- ---- -------
----- -------------- - ------------------------------------------------
----- ---------------- - --------------------------------------------------
----- ----------- --
-------------- - ------------
----- ---------------------- - --------------------------------------------------------
----- -------------------------- - ------------------------------------------------------------
----- --------------- - -------------------------------------------------
----- ------------ - ----------------------------------------------
----- ---------------------- - --------------------------------------------------------
----- ------------ - ---------------------------------------------------
--- -------------- - --------------------- --------------- -
---- --------
------------------------------ ---------------
--- ------ - -----------------------------
-------- ---------------- -
------ ------------------------- ---------- -- -----
-
------ ---------------
------------------------------------------
-------------- - ---------------5. 总结
在使用 Babel 进行代码转换时，transform-runtime 插件可以为我们提供方便，但它在处理一些情况时可能会引发代码污染的问题。为了解决这个问题，我们需要使用 @babel/plugin-transform-runtime 插件。通过本文的介绍，我们学习了使用该插件的方法和注意事项，并通过实例演示了自定义类或组件如何进行转换。最后，需要提醒大家，使用 any 模块的情况下，@babel/plugin-transform-runtime plugin 会有一些更加复杂和异化的行为，所以代码转换时一定要注意思考和规避这种情况。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520f42f95b1f8cacd8653de