在前端开发中，babel 是一个非常常用的工具，它可以将 ES6+ 的代码转换为可以在当前浏览器上运行的代码，也可以将 JSX 转换为一般的 JavaScript 代码。但是在使用 babel-runtime 的时候，可能会出现在每个文件中都生成垃圾代码的问题，这不仅使得项目体积增大，而且会影响项目的性能。为了解决这个问题，我们可以使用 babel-plugin-transform-runtime 插件。
babel-runtime 带来的问题
在使用 babel 进行 ES6+ 代码转换的过程中，通常我们会使用 babel-runtime。它是一个包含了 ES6+ 等语言本身不支持的一些新特性的实现的工具。虽然 babel-runtime 可以使得编写的代码更加优雅，但是它在每个文件中都会生成一些垃圾代码，如下所示：
-- -------------------- ---- ------- ---- -------- --- ---------------------- - -------------------------------------------------------- --- ------------ - -------------------------------------- --- --------------- - ------------------------------------------------ --- ---------------- - ------------------------------------------------- --- ------------- - ---------------------------------------------- --- --------------------------- - ------------------------------------------------------------ --- ---------------- - ------------------------------------------------- --- ---------- - ------------------------------------------- --- --------------- - ------------------------------------------------- --- ------------------- - ---------------------------------------------------- --- ---------------- - ------------------------------------------------------------------------- --- ------------- - ---------------------------------------------------------------------- --- --------------------------- - ------------------------------------------------------------------------------------ --- ---------------- - ------------------------------------------------------------------------- --- ---------- - -------------------------------------------------------------------
这使得我们的项目体积不断增大，而且每个文件都会包含重复的代码，造成了不必要的浪费。
解决 babel-runtime 带来的问题: babel-plugin-transform-runtime
为了解决上述问题，我们可以使用 babel-plugin-transform-runtime 插件。使用该插件将会把代码中所有的辅助函数都提取成一个单独的模块，这样可以避免每个模块都生成一份辅助函数的副本，从而减小项目体积，提高项目运行速度。
安装 babel-plugin-transform-runtime：
npm install --save-dev babel-plugin-transform-runtime
配置 babel：
-- -------------------- ---- -------
-
---------- -
----------------------------------- -
--------- ------ -- --- ------
---------- ------ -- -- ------- --------
-------------- ----- -- ---- -----------
--------------- ----- -- --- -- ------- ------------- -------- -------
--
-
-这样，就能在项目中使用 babel-plugin-transform-runtime 插件了。
示例
// index.js
[1, 2, 3].forEach(item => {
console.log(item)
})编译前：
-- -------------------- ---- ------- -- -------- ---- -------- --- ------------------------ - ------------------------------------------------------------------- --- ------------------------- - ------------------------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- - --- ----------------------------------------- -- ------------ -- --- -------- ------ - ------------------ ---
使用 babel-plugin-transform-runtime 后：
// index.js
"use strict";
require("core-js/modules/es.array.for-each");
[1, 2, 3].forEach(function (item) {
console.log(item);
});可以看到，使用 babel-plugin-transform-runtime 之后，每个文件中都不会包含重复的辅助函数代码，反而是将这些辅助函数统一到了一个单独的模块中，从而减小了项目的体积。
总结
使用 babel-plugin-transform-runtime 插件可以避免 babel 在每个文件中生成垃圾代码，从而减小项目体积，提高项目运行速度。在使用该插件的时候，需要注意不要忘记安装和配置该插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5f51f95c405902ee44a52