web-dev-qa-db-ja.com

TypeScriptとoutフォルダーで糸のワークスペースを使用する方法

私は糸を使ってモノレポをセットアップしようとしています。物事が適切に解決されるようにプロジェクト参照でTypeScriptを設定する方法について混乱しています。

たとえば、次のようなフォルダ構造がある場合

/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がdist/のサブフォルダcmd/distおよびclient/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ファイルにインライン化すると、すべてが機能します（ただし、リポジトリがダーティになり、除外するためにカスタムgitignoreが必要になります）。

TypeScript 3.xのモノレポを糸のワークスペースで適切に設定し、物事がうまく機能するようにする方法について誰かが光を当てることはできますか？

node.jstypescriptyarnpkgyarn-workspaces
9
devshorts

Github Repository を作成して、次のコードの説明を簡単に実行できるようにしました。


コードの説明

TypeScript _Project References_を使用すると、複数のより小さなTypeScriptプロジェクトで構成されるTypeScriptプロジェクトをコンパイルできます。各プロジェクトには_tsconfig.json_ファイルがあります。 （出典： プロジェクト参照ドキュメント ）


TypeScript設定

ルート_tsconfig.json_ファイルがあり、そのサブプロジェクトのみを管理しています。 referencesプロパティは、それぞれが有効な_tsconfig.json_ファイルを含むディレクトリを指定します。 _--build_オプション（_tsc --build tsconfig.json_）を使用してプロジェクトをビルドする場合、コンパイルする必要があるプロジェクトを指定しましたが、build orderを指定していません。プロジェクトをコンパイルする必要があります。

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


ビルド順序を正しく指定するには、__cmd/tsconfig.json_ファイルにreferencesプロパティを追加する必要があります。これは、_client/_をコンパイルする前に、まず_cmd/_をコンパイルする必要があることをコンパイラーに通知します。

_cmd/tsconfig.json_：

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

ビルド順序

_client/
  ^
  |
  |
 cmd/
_


ノードの設定

ベストプラクティスは、各サブプロジェクトに main プロパティと を含む独自の_package.json_ファイルがあることです。 name セット。この例では、両方のパッケージ（_cmd/_および_client/_）に、TypeScriptの_index.js_ファイルを指すmainプロパティがあります outDir ディレクトリ（_cmd/dist/index.js_および_client/dist/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_を追加するのは重要なので、モジュール解決アルゴリズムは_client/dist/index.js_を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_

糸を有効にするには workspacesworkspacesプロパティと_private: true_プロパティを_<root>/package.json_ファイルに追加します。

_<root>/package.json_

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


_cmd/_および_client/_パッケージは、_<root>/node_modules/_ディレクトリの下にsymlinkedです。

yarn node_modules


ノート

  • コードナビゲーションを有効にするには、まずプロジェクトをビルドする必要があります
  • すべてのパッケージは独立しています。 _cmd/_パッケージは、TypeScriptファイルを直接使用する代わりに、型情報に_client/dist/index.d.ts_定義ファイルを使用します。
15
a1300