简介
在前端开发过程中，我们会使用到很多类库和插件进行开发，而 Babel 就是其中一个不可或缺的工具。Babel 的核心作用是将 ES6+ 语法转换成 ES5 语法，以兼容目前大部分浏览器。@babel/plugin-external-helpers 是 Babel 插件之一，其主要作用是将 Babel 在编译过程中产生的 helpers 抽离出来，减少重复代码。
安装
在使用 @babel/plugin-external-helpers 插件之前，需要确保在项目中安装了 Babel。如果尚未安装 Babel，可以使用以下命令进行安装：
npm install --save-dev babel-core babel-loader babel-preset-env
安装完 Babel 后，接下来可以安装 @babel/plugin-external-helpers 插件：
npm install --save-dev @babel/plugin-external-helpers
使用
在安装完 @babel/plugin-external-helpers 插件后，需要在 Babel 的配置文件中进行配置。Babel 的配置文件默认为 babel.config.js，在该文件中添加如下配置：
-- -------------------- ---- -------
-------------- - -
-------- ----------------------
-------- -
-
----------------------------------
-
------------ -----
--
--
---------------------------------
--
--在配置文件中，我们将 @babel/plugin-external-helpers 插件添加到了 plugins 数组中。通过该插件，我们可以将 Babel 在编译过程中产生的 helpers 抽离出来，将其提供给 addExternalHelpers 方法，即可实现减少代码重复的效果。
示例
下面是一个简单的示例，展示如何在 Babel 中使用 @babel/plugin-external-helpers 插件：
-- -------------------- ---- -------
-- -----
----- --- - -- -- -
------------------- ---------
--
-- ---------
---- --------
--- --------------- - -------------------------------------------------
--- ------------ - ----------------------------------------------
--- -------------------------- - ------------------------------------------------------------
--- --------------- - -------------------------------------------------
--- --------- - -------------------------------------------
--- --------------- - -------------------------------------------------
-------- --------------------- - ------ -------- -- - --- ----- - ------------------------- ------- -- ----------------------------- - --- --------- - ---------------------------------- ------ - ------------------------ ---------- ----------- - ---- - ------ - ----------------- ----------- - ------ -------------------------------- -------- -- -
-------- --------------------------- - -- ------- ------- --- ----------- -- ------------------- ------ ------ -- ------------------------ ------ ------ -- ------- ----- --- ----------- ------ ----- --- - --------------------------------------------------------- --- -------- -- ----- ------ ----- - ----- --- - ------ ------ - -
-------- ----------------------------- --------------- - --- --- -- ------- ------ --- ----------- -- ------------------ -- ----- - -- ----------------- -- --- - ------------------------------- -- --------------- -- - -- ------ -------- --- ---------- - -- ---- - - --- --- - - -- --- - - -------- -- --- ------ - -- -- -- ---------- - -- -- -- --------- ------ - ----- ---- -- ------ - ----- ------ ------ ------ -- -- -- ----------- - ----- -- -- -- - -- - ----- --- ----------------- -- --- ----------- - -- - --------------------- - ------ --- -
-------- ------------------------------ ------- - -- ---- ------- -- ------- - --- --------- ------ -------------------- -------- --- - - ------------------------------------------ ---- -- -- --- -------- -- -------------- - - ------------------- -- -- --- ----- -- - --- ------ ------ -------------- -- -- --- ----------- -- --------------------------------------------------- ------ -------------------- -------- -
-------- ---------------------- ---- - -- ---- -- ---- -- --- - ----------- --- - ----------- --- ---- - - -- ---- - --- ----------- - - ---- ---- - ------- - ------- - ------ ----- -
-------- ---------------------------- - -- ----- --- ---- -- - ----- --- -------------------- ------ ---- ----------- - ------- ------ ---- --------- - ------ ----- -
-------- ------------ --------- --------- - -- ------- ------- --- ----------- -- ------------ - ---- - ------------ - ---- - ---- - -------- ------------ --------- --------- - --- ---- - ---------------------- ---------- -- ------- ------- --- ---- - ------------------------------------- ---------- -- ---------- - ------ ------------------------ - ------ ----------- -- - ------ ------------ --------- -------- -- -------- -
-------- ---------------------- --------- - ----- ---------------------------------------------- ---------- - ------ - ------------------------ -- ------- --- ----- ------ - ------ ------- -
-------- ------------------------ ----------- - ------------------ - ------------------------------------ ------------------------------ - --------- ------------------ - ----------- -
--- --- - --------------------- ------ -
------------------- ------
--- ------ - ------------------
-------- ----- -
--- ------
--------------------- -----
----- - ------------------
------- - ------
------ ------
-
----------------- --
---- --------
------ -------- ------- -
------------------- ---------
-
----
------ ----
-------编译后的 ES5 代码中，Babel 产生了很多 helpers 代码，这增加了代码的体积。如果在多处使用类似 Foo 类似的代码，每次都产生相同的 helpers 代码，将导致代码重复。通过使用 @babel/plugin-external-helpers 插件，可以将 helpers 代码提取出来，减少代码冗余，如下所示：
// ES6代码
import addExternalHelpers from '@babel/helpers/lib/addExternalHelpers';
const foo = () => {
console.log('Hello, World!');
};
addExternalHelpers();这样代码输出的 ES5 代码中就仅包含了 addExternalHelpers() 方法，而没有包含 Babel 产生的 helpers 代码，减少了代码的体积。
总结
本文介绍了 Babel 插件之一 @babel/plugin-external-helpers 的使用教程，了解了该插件的用法，能够将代码中的 helpers 提取出来，减少冗余代码。如果您还不太熟悉 Babel 的使用，可以通过本文了解 Babel 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/110319