今天遇到这样复杂的项目结构
packages
/app
pages/
package.json
/ui-kit
pages/
package.json
/shared
.babelrc
package.json
根lvl包json定义了nextjs应用程序workspaces: [packages/*]
在哪里app
,ui-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并未将任何加载程序应用于指向它的文件夹之外的任何内容。是否有解决此问题的解决方案?即从根文件夹下一个开始,但基于不同的脚本命令将其指向不同的入口文件?
问题是Babel不会转译下一个文件夹之外的代码。这是因为即使
.babelrc
文件位于代码的根目录,也不会考虑该文件。但是,如果您改为使用
babel.config.js
文件(如Babel版本7所建议那样)并将其放在代码的根目录(有效地替换.babelrc
文件),则可以使用以下插件:https://github.com/josephluck/next-plugin-custom-babel-config
我已经做到了,并且效果很好!