.babelrc 破坏语义用户界面和下一个应用程序答案

【问题标题】：.babelrc breaking semantic-ui and next app.babelrc 破坏语义用户界面和下一个应用程序
【发布时间】：2018-05-19 22:09:18
【问题描述】：

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

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

在此之前，我不需要该文件，它只是一个带有语义的 nextjs 应用程序。到目前为止，一切都很好。直到我决定重建我的语义 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 相关脚本，我会收到以下错误：

错误：插件/预设文件不允许导出对象，只能导出函数。在 /Users/theJuls/Workspace/cbt/client/node_modules/babel-preset-es2015/lib/index.js

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

错误：“/Users/theJuls/Workspace/cbt/client/node_modules/next/babel.js”中指定的插件 0 提供了“default”的无效属性（处理预设时：“/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

【问题讨论】：

标签： semantic-ui babeljs package.json nextjs

【解决方案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

这让一切恢复正常。

【讨论】：