前端开发中，我们经常需要使用 ECMAScript 6 或以上的语法，但是对于一些老的浏览器不支持这些新特性，为了保证代码在所有浏览器上的兼容性，我们需要将它们转换成 ES5 语法。Babel 是一个流行的 JavaScript 编译器，可以将我们写的新语法转换成浏览器能够理解的 ES5 语法。Babel 有许多插件可以使用，其中一个插件是 babel-plugin-external-helpers。本文将分享这个插件的使用教程，并提供示例代码，以便帮助你更好地理解如何使用。
什么是 babel-plugin-external-helpers
babel-plugin-external-helpers 是一个用于 Babel 的插件，在编译 ES6、ES7、ES8 等新语法时，使用了一些帮助函数。这些帮助函数处理一些常见的语法，比如继承、解构等。但是，每次编译时都会在代码中插入这些帮助函数，造成代码体积的增大，因此 babel-plugin-external-helpers 可以将这些帮助函数提取出来，生成一个帮助函数库，方便多个文件共享，从而减小代码体积和重复。
如何使用 babel-plugin-external-helpers
安装
使用 babel-plugin-external-helpers 插件需要先安装 Babel，在项目根目录下安装命令如下：
npm install -D babel-core babel-loader babel-plugin-external-helpers babel-preset-env
其中，-D 表示安装在 devDependencies 中，babel-preset-env 是一些关于新语法的默认规则。可以在 babel-loader 中配置以下 preset：
-- -------------------- ---- -------
------- -
------ -
-
----- --------
-------- ---------------
---- -
-
------- --------------- -- -- ------------
-------- -
-------- -------
-
-
-
-
-
-配置
在项目目录下创建一个 .babelrc 文件，并添加以下配置：
{
"plugins": [
["external-helpers"]
]
}这样就完成了 babel-plugin-external-helpers 的配置。
使用
在代码中，可以直接使用 ES6 语法写代码，例如：
-- -------------------- ---- -------
----- ------ -
----------- ------ ---- -
--------- - ----
-------- - ---
-
------- -- -
------ ---------
-
-在编译时，Babel 会将这段代码转换成 ES5 语法，同时会用到一些帮助函数。如果直接使用 babel-plugin-external-helpers 可能会出现以下错误：
ReferenceError: _classCallCheck is not defined
这是因为帮助函数被提取了出来，而没有被导入。需要在代码中手动导入这些帮助函数库。在此之前，需要先安装一个支持导入的库，如 babel-polyfill。在代码中，添加以下代码：
import 'babel-polyfill' import 'babel-plugin-external-helpers'
这样，就成功地导入之前提取出来的帮助函数库。完整的示例代码如下：
-- -------------------- ---- -------
------ ----------------
------ -------------------------------
----- ------ -
----------- ------ ---- -
--------- - ----
-------- - ---
-
------- -- -
------ ---------
-
-总结
本文介绍了 babel-plugin-external-helpers 的使用教程，包含了插件的安装、配置和使用方法，并提供了示例代码。希望能帮助你更好地理解和使用这个插件，从而提高前端开发效率。同时，也提醒开发者在使用这个插件时要注意代码输出的兼容性问题，以免在老的浏览器上出现兼容性问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/87773