javascript - 将 next.js 与纱线工作区一起使用
问题描述
今天遇到了像这样的项目结构的复杂情况
packages
/app
pages/
package.json
/ui-kit
pages/
package.json
/shared
.babelrc
package.json
root lvl package 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) 您可能需要适当的加载程序来处理此文件类型。| 从“反应”导入反应 | | 导出默认()=>你好共享!|
所以看起来 nextjs 没有将任何加载器应用于它所指向的文件夹之外的任何内容。有没有办法以某种方式解决这个问题?即下一个从根文件夹开始,但基于不同的脚本命令以某种方式指向不同的入口文件?
解决方案
从NextJs 11 开始,有一个名为externalDir的新实验选项,它工作得很好,并且不需要使用 next-transpile-modules。
为了清楚起见,让我们一步一步地做,它可能看起来是一个漫长的过程,但一旦你得到它,它就很容易(实际上是 3 个步骤)
1.纱线V3(可选)
为了改善体验,我建议将yarn 升级到 v3+ ( yarn set version 3.0.2 && yarn plugin import workspace-tools
) 并编辑生成的配置.yarnrc.yml
,类似于以下配置:
# Yarn 2+ supports pnp or regular node_modules installs. Use node-modules one.
nodeLinker: node-modules
nmMode: hardlinks-local
plugins:
- path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
spec: "@yarnpkg/plugin-workspace-tools"
yarnPath: .yarn/releases/yarn-3.0.2.cjs
.gitignore
PS:您可能也想将其添加到
.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*
为什么 ?因为您将有可能使用工作区:别名协议。(也可在 pnpm 中获得)
2.严格的工作空间拓扑(可选)
我建议严格限制软件包所依赖的内容(有明确的界限)。这不是绝对要求,而是一种可以避免难以调试情况的良好做法。
为了帮助包管理器,我建议正确声明每个应用程序/包的依赖项及其边界。
换句话说,每个包/应用程序都有自己的 package.json,您可以在其中显式添加他们需要的 deps(不在根 package.json 中)
按照你的例子,
apps/
packages
/app
package.json (app depend on ui-kit through yarn workspace: alias)
tsconfig.json (we will add typescript path aliases there too)
next.config.js
/ui-kit
package.json
package.json (do not put nextjs as dep here, only in app)
根的例子package.json
{
"name": "monorepo",
"private": true,
"workspaces": [
"packages/*" // Enable package discovery in packages/* directory.
],
"devDependencies": {
"husky": "7.0.2", // Only what's needed for monorepo management
}
一个例子packages/app/package.json
{
"name": "my-app",
"devDependencies": {
"@types/node": "16.10.1",
"@types/react": "17.0.29",
"@types/react-dom": "17.0.9",
"typescript": "4.4.4"
},
"dependencies": {
// Assuming the name of packages/ui-kit is ui-kit,
// we explicitly declare the dependency on it through
// workspace: alias (package-manager perspective)
"ui-kit": "workspace:*",
"next": "11.1.2",
"react": "17.0.2",
"react-dom": "17.0.2",
}
}
为什么 ?这样你就不会陷入与部门冲突的奇怪问题。
3.打字稿别名
即使您不使用 typescript,NextJs 也会读取tsconfig.json
并查找typescript路径映射配置。如果您不知道它是什么......它只是一个您声明(再一次)您的部门的配置。Nextjs 会将它们转换为它在后台编译 deps 所使用的内容(即:babel-plugin-module-resolver和可能稍后的 swc)。
按照您的示例,只需./packages/app/tsconfig.json
以这种方式编辑 a
{
"compilerOptions": {
// here baseUrl is set at ./src (good practive), can
// be set to '.'
"baseUrl": "./src",
"paths": {
// Declare deps here (keep them in sync with what
// you defined in the package.json)
// PS: path are relative to baseUrl
"ui-kit/*": ["../../ui-kit/src/*"],
// if you have a barrel in ui-lib
"ui-kit": ["../../ui-kit/src/index"],
}
},
}
为什么 ?更多工具之间的限制(包管理器和路径有不同的视角)
4.nextjs配置
在packages/app/nextjs.config.js
中,启用externalDir配置(目前处于实验阶段,但效果很好,反馈线程在这里)
const nextConfig = {
experimental: {
// this will allow nextjs to resolve files (js, ts, css)
// outside packages/app directory.
externalDir: true,
},
};
export default nextConfig;
PS:对于较旧的 nextjs 版本,完全可以通过自定义 webpack 配置来做同样的事情。问你是否需要一个例子。
你会得到什么
在您的应用程序中,您应该能够像这样导入您的 ui-kit:
import { Button } from 'ui-kit';
// or
import Avatar from 'ui-kit/components/Avatar'
它的美妙之处在于快速刷新可以开箱即用(无需构建)。它很快,你不需要 NX(+ 昂贵的 nx.cloud),匆忙或任何东西......
Nextjs 将简单地导入文件,按需构建它们,甚至将它们缓存在它自己的优化缓存中(尤其是在 webpack 5 中速度很快,并且也可以在 CI 上启用)...
如果您想了解更多信息,我将维护一个示例存储库,该存储库将在此存储库上提供完整的生命周期视角(ci、github 操作、linters、部署......):https ://github.com/belgattitude/nextjs-monorepo-example 。
PS:也可以在这里关注 yarn 3+ 的开发和版本,他们现在做得很好。
推荐阅读
- python - Python映射对象在减少后变为空
- eclipse - 为什么 Eclipse 拒绝将 Java 类作为 AWS SAM Local 而不仅仅是 Java 运行?
- d3.js - d3.js 在聚集图表上格式化数据标签
- c# - 如何从另一个表单填充 datagridview 单元格?C#
- c# - 从应用商店下载时,Xamarin.iOS 应用在使用 iPhone5 启动时崩溃。DYLD,库未加载错误。-+
- symfony - Symfony 4 学说即使在开发环境中也使用缓存
- java - 扫描文本文件时出现 NetBeans 错误
- dart - Dart 中的 this[x] 等价于什么?
- .htaccess - Apache 重定向指令不作为最终规则
- ios - 无法以编程方式在 TableView 中自动滚动到特定部分