在使用Babel编译ES6代码时，你可能会遇到 _interopRequireDefault not defined 错误。这是一个常见的错误，本文将为你介绍其解决方案并提供示例代码。
问题原因
这个错误发生的原因是在 babel 编译时转换了 ES6 中的模块导入语法，例如 import foo from './foo' 转换成了 var _foo2 = _interopRequireDefault(require('./foo'));，然后使用了 _interopRequireDefault 变量，但是在编译后的代码中却找不到 _interopRequireDefault 变量，从而报出了该错误。
解决方案
我们可以使用 babel-plugin-transform-runtime 插件来解决这个问题。它会在编译后生成一个单独的 es6 版本的 runtime 文件，并且在编译代码中使用那个版本的文件。这样就不会使用到不兼容的 polyfill 或者兼容性低于 babel 的 polyfill 了。
下面是几个步骤，帮助你解决这个问题：
步骤一：安装 babel-plugin-transform-runtime
首先，你需要安装该插件：
--- ------- ---------- ------------------------------
步骤二：配置 .babelrc
然后你需要在 .babelrc 文件中添加以下配置：
-
---------- -
-
--------------------
-
--------- ------
---------- -----
-------------- -----
--------------- -----
-
-
-
-这个配置告诉 babel 使用 babel-plugin-transform-runtime 插件，并发送主预源的 helpers 函数到单独的模块中，以避免在每个模块中重复使用 helper 函数 对的代码 空间，这样可以减少编译体积。
步骤三：使用 require 方法调入 babel-runtime
最后你需要在你的代码文件中使用 require('babel-runtime') 引入 babel runtime 文件。
-------------------------
现在您的代码应该可以运行了。
示例代码
下面是一份示例代码，展示了如何解决这个问题。
index.js:
------ -------------- ------ --- ---- -------- -----------------
foo.js:
------ ------- ------ --------
polyfills.js:
-------------------------
.babelrc:
-
---------- -
-
--------------------
-
--------- ------
---------- -----
-------------- -----
--------------- -----
-
-
-
-结论
以上是解决 _interopRequireDefault is not defined 错误的完美方案。 Babel runtime 和 babel-plugin-transform-runtime插件是必备的模块之一，它们可在编译 ES6 代码时有效的降低代码大小并解决兼容性问题。希望这篇文章对你有所帮助!
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6720408f2e7021665e015df4