在前端开发中，我们通常会使用 Babel 来将 ES6+ 的代码转换成浏览器可以执行的 ES5 代码。但是，有时候我们在使用 Babel 编译时可能会遇到如下错误：
------ ------------- ----- --- --- ------- -- ------ -------- ---- ----------
这个错误的原因是因为 Babel 7.0 之后，插件和预设必须导出一个函数，而不是一个对象。在这篇文章中，我们将详细介绍如何解决这个错误。
错误示例
首先，让我们来看一个简单的示例，假设我们有以下的 .babelrc 配置文件：
-
---------- -
-
------ -
------ ----
-
-
-
-当我们执行 babel 命令来编译我们的代码时，我们会得到下面的错误：
------ ------------- ----- --- --- ------- -- ------ -------- ---- ----------
这个错误告诉我们，我们的 .babelrc 文件中的 foo 预设导出了一个对象，而不是一个函数。
解决方案
为了解决这个错误，我们需要将我们的插件和预设改成导出一个函数。这个函数接受一个选项对象，并返回一个 Babel 插件或预设对象。
例如，我们可以将上面的 .babelrc 配置文件改成下面的样子：
-
---------- -
-
------
-
------ ----
-
-
-
-然后我们需要在项目的根目录下创建一个 babel.config.js 文件，并将我们的 foo 预设改成导出一个函数：
-------------- - ------------- -------- -
------ -
-------- -
-
--------------------
-
-------- -
--------- ------ - ---------- ------- -- ---
-
-
-
-
--
--在这个函数中，我们接受了两个参数：api 和 options。api 参数是一个对象，包含了一些方法，例如 api.assertVersion 和 api.cache.needsRebuild，我们可以使用这些方法来操作 Babel。options 参数则是我们在 .babelrc 文件中传递的选项对象。
最后，我们需要使用 @babel/core 模块来编译我们的代码。我们可以在 package.json 文件中添加下面的脚本：
-
---------- -
-------- ------ --- -- ----
-
-然后执行 npm run build 命令来编译我们的代码。
总结
在本文中，我们详细介绍了如何解决 Babel 编译时的 "Error: Plugin/Preset files are not allowed to export objects" 错误。我们需要将我们的插件和预设改成导出一个函数，并在 babel.config.js 文件中使用这些函数来配置 Babel。这个方法可以帮助我们更好地使用 Babel 来编译我们的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65ff9556d10417a222ac6850