在纱线工作区中使用next.js

今天遇到这样复杂的项目结构

packages
  /app
    pages/
    package.json
  /ui-kit
    pages/
    package.json
  /shared
.babelrc
package.json

根lvl包json定义了nextjs应用程序workspaces: [packages/*]在哪里appui-kit两个都是。

我在根lvl package.json中有以下脚本

"dev:app": "next packages/app",
"dev:ui-kit": "next packages/ui-kit"

在我引入shared文件夹之前,这两种方法都工作正常,该文件夹本质上包含一些函数/组件等,它们在程序包之间可以重复使用。一旦将其包含在其中一个中,app否则ui-kit我将收到如下错误

在./packages/shared/index.js中

模块解析失败:意外的令牌(4:21)您可能需要适当的加载程序来处理此文件类型。| 从“反应”导入React | | export default()=>您好,共享!|

因此,看起来nextjs并未将任何加载程序应用于指向它的文件夹之外的任何内容。是否有解决此问题的解决方案?即从根文件夹下一个开始,但基于不同的脚本命令将其指向不同的入口文件?

2020/03/24 10:09:14

问题是Babel不会转译下一个文件夹之外的代码。这是因为即使.babelrc文件位于代码的根目录,也不会考虑文件。

但是,如果您改为使用babel.config.js文件(如Babel版本7所建议那样)并将其放在代码的根目录(有效地替换.babelrc文件),则可以使用以下插件:

https://github.com/josephluck/next-plugin-custom-babel-config

我已经做到了,并且效果很好!