次のようなファイル構造を持つ2つのプロジェクトがあるとします。
/my-projects/
/project-a/
lib.ts
app.ts
tsconfig.json
/project-b/
app.ts // import '../project-a/lib.ts'
tsconfig.json
lib.tsにあるものproject-aを からも消費したいのですがproject-b、どうすればよいですか?
リリースするNPMモジュール - 絶対に欲しくない、このような単純な使用例ではやりすぎです。 2 つのプロジェクト間で 1 つのファイルを共有したいだけです。
使用
import '../project-a/lib.ts'- 動作せず、TypeScriptがエラーを発する
'lib.ts' is not under 'rootDir'. 'rootDir' is expected to contain all source files.
tsconfig.json両方をカバーするために 1 レベル上に配置しますproject-aが、project-bそれはできません。TypeScript 構成はこれらのプロジェクトで若干異なります。また、あまり便利ではないので、そうしたくありません。
他に方法はあるでしょうか?
ベストアンサー1
Typescript 3.0 以降では、プロジェクト参照を使用してこれを実行できます。
Typescript ドキュメント:https://www.typescriptlang.org/docs/handbook/project-references.html
lib.tsを「lib」のような小さなtsプロジェクトに移動する必要があると思います。
lib プロジェクトには、次の内容を含む tsconfig が必要です。
// lib/tsconfig.json
{
"compilerOptions": {
/* Truncated compiler options to list only relevant options */
"declaration": true,
"declarationMap": true,
"rootDir": ".",
"composite": true,
},
"references": [] // * Any project that is referenced must itself have a `references` array (which may be empty).
}
次に、プロジェクトaとプロジェクトbの両方で、このライブラリプロジェクトへの参照をtsconfigに追加します。
// project-a/ts-config.json
// project-b/ts-config.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node"
// ...
},
"references": [
{
"path": "../lib",
// add 'prepend' if you want to include the referenced project in your output file
"prepend": true,
}
]
}
lib プロジェクトで、他のプロジェクトと共有するすべてのコードをエクスポートするファイル index.ts を作成します。
// lib/index.ts
export * from 'lib.ts';
さて、lib/lib.ts は次のようになっているとします。
// lib/lib.ts
export const log = (message: string) => console.log(message);
これで、プロジェクトaとプロジェクトbの両方でlib/lib.tsからログ関数をインポートできるようになりました。
// project-a/app.ts
// project-b/app.ts
import { log } from '../lib';
log("This is a message");
Intelissense が機能する前に、次のコマンドを使用して project-a と project-b の両方をビルドする必要があります。
tsc -b
最初にプロジェクト参照 (この場合は lib) をビルドし、次に現在のプロジェクト (project-a または project-b) をビルドします。
TypeScript コンパイラは、lib の実際の TypeScript ファイルを参照しません。代わりに、lib プロジェクトのビルド時に生成された TypeScript 宣言ファイル (*.d.ts) のみを使用します。
そのため、lib/tsconfig.json ファイルには以下が含まれている必要があります。
"declaration": true,
ただし、Visual Studio コードで F12 キーを使用して project-a/app.ts の log 関数の定義に移動すると、正しい TypeScript ファイルが表示されます。少なくとも、lib/tsconfig.json を次のように正しく設定していれば、
"declarationMap": true,
Typescript を使用したプロジェクト参照の例を示す小さな github リポジトリを作成しました。