在使用 Babel 6 的 transform-runtime 插件时，有时会遇到 "$export is not a function" 的错误。这个错误通常是由于使用了错误的引入方式或者没有正确配置插件所导致的。本文将详细介绍这个问题，并提供解决方案和示例代码。
错误原因
Babel 6 的 transform-runtime 插件旨在解决把一些常用的帮助函数内联到每一个需要它的文件中而造成的重复的代码问题。这个插件可以使得我们不必在每个文件里都引入大量的helper functions，从而减小打包后文件的大小。但是在使用该插件的过程中，如果没有正确配置或者使用不当，就可能出现 $export is not a function 的错误。
这个错误的原因是因为 transform-runtime 插件默认只会转换 ES6 模块的 import 和 export 语句，而对于 CommonJS 模块的 exports 和 module.exports 则不会进行转换。因此在某些情况下，使用了 CommonJS 模块的代码将不能正常运行。
解决方案
针对这个错误，我们有以下两种解决方案：
方案一：使用 babel-plugin-transform-es2015-modules-commonjs 插件
这个方案的思路是，让所有的模块都采用 ES6 的 import/export 语法，从而避免使用 CommonJS 的 exports 和 module.exports 语法。具体实现方法是，使用 babel-plugin-transform-es2015-modules-commonjs 插件来将所有 CommonJS 模块转换为 ES6 模块。
在 .babelrc 文件中添加该插件：
-- -------------------- ---- -------
-
---------- -
--------------------- -
---------- -----
-------------- ----
---
-----------------------------------
-
-方案二：手动引入 $export 函数
这个方案的思路是，在需要使用 $export 函数的地方手动引入该函数。具体实现方法是，在某个文件里添加以下代码：
import { $export } from 'babel-runtime/core-js/symbol/global';
$export($export.S + $export.F * !global.Reflect, 'Symbol', {
// ...
});示例代码
接下来给出两个示例代码来说明如何解决这个问题。
示例一
假设我们有一个 Node.js 项目，其中 index.js 文件如下所示：
const path = require('path');
console.log(path.join(__dirname, 'foo'));当我们运行它时，就会遇到 $export is not a function 的错误。为了解决这个问题，我们可以采用方案一，即在 .babelrc 文件中添加 transform-es2015-modules-commonjs 插件。
.babelrc 文件内容如下：
-- -------------------- ---- -------
-
---------- -
------- ----------- -------- ------------
--
---------- -
--------------------- -
---------- -----
-------------- -----
---
-----------------------------------
-
-添加了 transform-es2015-modules-commonjs 插件后，我们再次运行 index.js 文件就不会遇到错误了。
示例二
假设我们有一个前端项目，其中 index.html 文件如下所示：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------ - ------------------------- ------- ------ ------- -------------------------- ------- -------
而 index.js 文件内容如下：
import $ from 'jquery';
console.log($('body'));当我们在浏览器中打开 index.html 文件时，就会遇到 $export is not a function 的错误。为了解决这个问题，我们可以采用方案二，在 index.js 文件的第一行手动引入 $export
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31693