如何使用带有打字稿和输出文件夹的纱线工作区？

Question

我正在尝试使用 yarn 建立一个 monorepo。我对如何使用项目引用设置打字稿以使事情正确解决感到困惑。

例如，如果我有一个类似的文件夹结构

/cmd
/client

我希望 cmd 依赖于 client 我可以：

cmd/tsconfig.json:

{
  "compilerOptions": {
    "types": ["reflect-metadata", "jest"],
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "moduleResolution": "node",
    "declaration": true,
    "importHelpers": true,
    "composite": true,
    "target": "esnext"
    "sourceRoot": "src",
    "outDir": "dist"
  },
  "references": [
    {
      "path": "../client"
    }
  ],
  "include": [
    "src/**/*"
  ]
}

package.json

{
  "name": "cmd",
  "version": "1.0.0",
  "dependencies": {
    "client": "^1.0.0",
  }
}

在此模型中，cmd 和 client 都在其 tsconfig 中使用 outDir 和 sourceRoot 字段集进行编译。这意味着他们所有编译的 javascript 都会进入 cmd/dist 和 client/dist 的 dist/ 子文件夹

如果现在我尝试将 client 中的类引用到 cmd 中

import Foo from 'client/src/foo'

IDE 非常乐意解决这个问题，因为它似乎是通过 typescript references 属性映射的。

然而，编译后的 javascript 归结为一个

const foo_1 = require("client/src/foo");

但是，实际构建的 javascript 在 client/dist/src/foo 中，因此在运行时这永远不会起作用。

另一方面，如果我不使用 sourceRoots 和 outDirs 并且将 javascript 与 typescript 文件内联在同一个文件夹中，那么一切都可以正常工作（但会使 repo 变脏并且需要自定义 gitignores 来排除东西）

任何人都可以阐明如何正确设置带有纱线工作区的 typescript 3.x monorepo 以使事情正常工作吗？

Answer 1

我创建了一个 Github Repository 以便更容易遵循以下代码描述：

代码说明

TypeScript Project References 可以编译由多个较小的 TypeScript 项目组成的 TypeScript 项目，每个项目都有一个 tsconfig.json 文件。 （来源：Project References Documentation）

TypeScript 设置

我们有一个根tsconfig.json 文件，它只管理其子项目。 references 属性指定每个目录都包含一个有效的tsconfig.json 文件。如果我们现在使用 --build 选项 (tsc --build tsconfig.json) 构建项目，那么我们指定了应该编译的项目，但我们没有指定应该编译项目的 构建顺序 .

{
  "references": [
    { "path": "./client" },
    { "path": "./cmd" }
  ],
  "files": [],
  "include": [],
  "exclude": ["**/node_modules"]
}

要正确指定构建顺序，我们需要将references 属性添加到cmd/tsconfig.json 文件中。这告诉编译器，在我们编译cmd/之前，它首先需要编译client/：

cmd/tsconfig.json:

{
  "extends": "../tsconfig.packages.json",
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
  },
  "references": [
    {
      "path": "../client"
    }
  ]
}

构建顺序

client/
  ^
  |
  |
 cmd/

节点设置

最佳实践是每个子项目都有自己的package.json 文件，其中包含main 属性和name 集。在我们的示例中，两个包（cmd/ 和 client/）都有一个 main 属性，指向 TypeScript outDir 目录（cmd/dist/index.js 和 client/dist/index.js）中的 index.js 文件。

项目结构：

tsconfig.json
cmd/
    tsconfig.json
    package.json
    src/
        index.ts
    dist/  #artifacts
        index.js
client/
    tsconfig.json
    package.json
    src/
        index.ts
    dist/  #artifacts
        index.js

client/packages.json

{
  "name": "client",
  "version": "1.0.0",
  "main": "dist/index",
  ...
}

重要我们将 client/ 作为依赖添加到 cmd/packages.json 以便模块解析算法可以找到 @ 987654359@ 当我们在我们的 TypeScript 代码中导入它时 import Foo from 'client';:

cmd/packages.json

{
  "name": "cmd",
  "version": "1.0.0",
  "main": "dist/index",
  "dependencies": {
    "client": "1.0.0" // important
  }
}

cmd/src/index.ts

import Foo from 'client';

console.log(Foo())

纱线设置

纱线设置很简单。 Yarn 添加node_modules 下的所有包，而不是：

• cmd/node_modules
• client/node_modules

要启用纱线workspaces，请将workspaces 属性和private: true 属性添加到<root>/package.json 文件中。

<root>/package.json

{
  "private": true,
  "workspaces": [
    "cmd",
    "client"
  ],
  "name": "yarn_workplace",
  "version": "1.0.0"
  ...
}

cmd/ 和 client/ 包是symlinked 在<root>/node_modules/ 目录下：

注意事项

• 要启用代码导航，必须先构建项目
• 每个包都独立存在。 cmd/ 包使用定义文件 client/dist/index.d.ts 获取类型信息，而不是直接使用 TypeScript 文件。

Answer 2

我已经设置了一个monorepo，我在this repository 中使用Yarn Workspaces 和Typescript 在我的项目中一直使用一些配置。

我不知道这个设置是否能解决你的问题，但你不需要在 Typescript 配置中指定你的包。当您使用 Yarn Workspaces 时，它会链接您在根 node_modules 中的所有包，这些包是您在根 package.json 的工作区包属性中定义的：

"workspaces": {
    "packages": [
        "packages/**/*"
    ],
    "nohoist": []
}

在yarn install 之后，根node_modules 具有client 和cmd 作为链接文件夹。

使用此配置，您可以简单地导入 Workspace 内任何包中的任何包。例如：

// cmd/src/index.ts

import { name } from 'client';

const otherName = 'cmd' + name;

console.log(otherName);