javascript - 将 next.js 与 yarn 工作区一起使用

Question

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

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

root lvl package json 定义 workspaces: [packages/*] 其中 app 和 ui-kit 都是 nextjs 应用。

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

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

在我引入 shared 文件夹之前，这两个都工作得很好，它基本上包含一些功能/组件等......在包之间重复使用。一旦我将它包含到 app 或 ui-kit 中，我就会收到这样的错误

在 ./packages/shared/index.js 中

Module parse failed: Unexpected token (4:21) You may need an appropriate loader to handle this file type. | import React from 'react' | | export default () => Hello shared! |

所以看起来 nextjs 没有将任何加载程序应用于它所指向的文件夹之外的任何内容。有没有办法以某种方式解决这个问题？即从根文件夹开始，但根据不同的脚本命令以某种方式将其指向不同的入口文件？

Answer 1

自 NextJs 11 以来，有一个名为 externalDir 的新实验性选项效果很好，不需要使用 next-transpile-modules。

为了清楚起见，让我们一步一步地制作 howto，它可能看起来是一个漫长的过程，但一旦你掌握了它，它就非常简单(实际上是 3 个步骤)

---

1。 Yarn V3(可选)

为了改善体验我建议升级yarn to 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

PS:您可能也想将其添加到 .gitignore

.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*

为什么？ 因为您将有可能使用 workspace: alias protocol . (在 pnpm 中也可用)

---

2。严格的工作区拓扑(可选)

我建议严格控制包依赖什么(有明确的界限)。这不是绝对要求，而是可以避免难以调试情况的良好做法。

为了帮助包管理器，我建议正确声明每个应用程序/包的依赖项及其边界。

换句话说，每个包/应用程序都有自己的 package.json，您可以在其中明确添加他们需要的 dep(不在根 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)

root 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 别名

即使您不使用 typescript，NextJs 也会读取 tsconfig.json 并查找 typescript path mapping配置。如果您不知道它是什么......它只是一个配置，您可以在其中声明(再一次)您的部门。 Nextjs 会将它们转换为它在后台用于编译 deps 的内容(即:babel-plugin-module-resolver 以及可能稍后的 swc)。

按照您的示例，只需以这种方式编辑./packages/app/tsconfig.json

{
  "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配置(目前处于实验阶段，但效果很好，feedback thread here)

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+ 的开发和版本 here ，他们现在做得很好。