在前端开发中，我们经常使用到 Babel 来编译 ES6 代码以支持更广泛的浏览器。但是有时候在使用 Babel 编译 ES6 代码时会出现 TypeError：(0 , _class.default) is not a function 错误，这是因为 Babel 编译后的代码中使用了模块化的导入方式，导致了一些问题。本文将介绍这个错误的原因，并提供解决方案。
错误原因
我们先来看一个示例代码：
-- -------------------- ---- -------
-- ---------
------ ------- ----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- --- ----------------
-
-
-- -------
------ ------ ---- -----------
----- - - --- --------------
----------在这个示例代码中，我们定义了一个名为 Person 的类，并使用了 ES6 的模块化导出方式将其导出。在 main.js 中，我们通过 ES6 的模块化导入方式将 Person 导入，并创建了一个实例 p 并调用了 sayHi 方法。
但是，当我们使用 Babel 编译这段代码时，会出现如下的错误：
TypeError: (0 , _class.default) is not a function
这个错误的原因是，Babel 编译后的代码中使用了 CommonJS 的导入方式，而在 Babel 编译后的代码中，类的默认导出被转换成了一个对象，而不是一个函数。因此，在 main.js 中创建类的实例时就会出现该错误。
解决方案
为了解决这个问题，我们需要使用 Babel 的插件 @babel/plugin-transform-runtime 来转换代码中的默认导出。该插件会替换模块导入时的引用，以便在文件单独编译时避免重复引入 runtim 库。
首先，我们需要使用 npm 安装这个插件：
npm install --save-dev @babel/plugin-transform-runtime
然后，在 .babelrc 文件中配置该插件：
{
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 3
}]
]
}最后，执行 Babel 编译命令时加上 --runtime-corejs 参数即可：
babel src --out-dir lib --runtime-corejs
这样，Babel 就能正确地编译 ES6 代码，并避免出现 TypeError：(0 , _class.default) is not a function 错误。
总结
在开发过程中，我们可能会遇到各种各样的问题，而这个错误就是其中之一。，在我们遇到这个错误时，应该及时找出问题所在，并采取正确的解决方案。希望本文能够对你理解和解决这个问题有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e8850ff6b2d6eab3410df8