.babelrc 破坏语义-ui 和下一个应用程序

Question

我不确定发生了什么，但每当我想向我的应用程序添加单元测试时，我都必须使用以下代码添加 .babelrc 文件：

{
  "presets": [
    "es2015",
    "next/babel"
  ]
}

在此之前，我不需要这个文件，它只是一个具有语义的 nextjs 应用程序。到目前为止，一切都很好。直到我决定重新 uild 我的语义-ui 主题，结果证明这是一个巨大的错误！

这就是我运行：cd semantic && gulp build

这导致我的应用程序在出现 .babelrc 时停止工作。

这些是我的 package.json 脚本：

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "semantic": "cd semantic && gulp build",
    "test": "mocha --require babel-core/register --watch-extensions js **/*.test.js"
  },

如果我尝试运行 next 相关脚本，我会收到以下错误：

Error: Plugin/Preset files are not allowed to export objects, only functions. In /Users/theJuls/Workspace/cbt/client/node_modules/babel-preset-es2015/lib/index.js

如果我尝试运行我的单元测试，我得到

Error: Plugin 0 specified in "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js" provided an invalid property of "default" (While processing preset: "/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js")

如果我删除 .babelrc，所有 next 脚本运行正常，但是我完全失去了我的单元测试。为什么会这样？我该怎么做才能解决这个问题？

我不确定这是否相关，但这是我当前的文件结构：

api/
components/
config/
lib/
pages/
semantic/
store/
.babelrc
package-lock.json
package.json
semantic.json

Answer 1

我不确定它为什么突然坏了，但我已经找到了解决它的方法，这也是最新的方法，因为我以前的方法已被弃用。

首先我必须安装以下模块：@babel/core 和 @babel/register

将 .babelrc 文件更改为如下：

{
  "presets": [
    "@babel/preset-env",
    "next/babel"
  ]
}

最后，在 package.json 中稍微将 test 命令更改为：

"test": "mocha --require @babel/register --watch-extensions js **/*.test.js"

因为我们现在使用 @babel/register

这让一切恢复正常。

.babelrc 破坏语义-ui 和下一个应用程序

.babelrc breaking semantic-ui and next app

semantic-ui

package.json

babeljs

nextjs