如何使用帶有打字稿和出文件夾的紗線工作區？

Question

我正在嘗試使用紗線建立一個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都使用在outDir設置的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文件內聯在同一文件夾中，則一切正常（但使存儲庫變臟並需要自定義gitignores來排除事物）

任何人都無法闡明如何正確設置帶有紗線工作區的Typescript 3.x monorepo，從而使工作正常進行嗎？

Answer 1

我創建了一個Github 存儲庫 ，以使其更容易遵循以下代碼描述：

代碼說明

使用TypeScript Project References可以編譯由多個較小的TypeScript項目組成的TypeScript項目，每個項目都有一個tsconfig.json文件。 （來源： 項目參考文檔 ）

TypeScript設置

我們有一個tsconfig.json根文件，該文件僅管理其子項目。 references屬性指定目錄，每個目錄均包含有效的tsconfig.json文件。 如果現在使用--build選項（ tsc --build tsconfig.json ）來構建項目，則我們指定了應編譯的項目，但未指定項目的編譯順序 。

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

為了正確地指定構建順序，我們需要在cmd/tsconfig.json文件中添加references屬性。 這告訴編譯器在編譯cmd/之前首先需要編譯client/ cmd/ ：

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以便模塊解析算法在將TypeScript代碼中的“ client/dist/index.js import Foo from 'client';時可以找到client/dist/index.js 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屬性和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

我已經使用此存儲庫中的 Yarn Workspaces和Typescript在我的項目中使用了一些配置，從而設置了monorepo。

我不知道此設置是否可以解決您的問題，但是您無需在Typescript配置中指定軟件包。 當您使用Yarn Workspaces時，它將在根package.json中的工作空間包屬性中定義的根node_modules中鏈接所有package.json ：

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

在yarn install之后，根節點node_modules將client和cmd作為鏈接文件夾。

使用此配置，您可以簡單地導入工作區中任何包中的任何包。 例如：

// cmd/src/index.ts

import { name } from 'client';

const otherName = 'cmd' + name;

console.log(otherName);