web-dev-qa-db-ja.com

参照付きのTypeScriptプロジェクト

私は プロジェクト参照 を使用して、「前面」と「背面」のプロジェクトから「共有」プロジェクトを参照しています。

tsc -v：Version 3.3.3

プロジェクト構造：

./{MY_PROJECT}.code-workspace   /* the only file in this level */
./back
./back/tsconfig.json
./shared/src/
./shared/
./shared/tsconfig.json
./shared/src/
./front
./front/tsconfig.json
./front/src

共有プロジェクトから./front/src/article-view-model.tsにモジュールをインポートしようとしています：

import Article from "@shared/src/article";            // alias path
import Article from "../../shared/src/article"; // full relative path
export default class ArticleViewModel {
}

次のエラーは、VS Code GUIにすぐに表示されます。

エイリアスパスの場合：

モジュール '@ shared/src/article'が見つかりません。 ts（2307）

完全な相対パスの場合：

出力ファイル「../../shared/src/article」は、ソースファイル「c：/ {SOMEWHERE_IN_MY_PC} /shared/src/article.ts」からビルドされていません。 ts（6305）

Intellisense（VS Code）は、エイリアスオプションと相対オプションの両方で機能します。

Intellisense

エラーを無視してビルドしようとすると、失敗します：

C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：1296 throw e; ^

エラー：デバッグ失敗。偽の表現。 mergeSymbol（C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：25861：26）at C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：25960：47 at Map.forEach（）at mergeSymbolTable（C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：25958：20）at initializeTypeChecker（C ：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：48653：21）at Object.createTypeChecker（C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：25711：9）at getDiagnosticsProducingTypeChecker（C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：71398：93）at Object.getGlobalDiagnostics（C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc.js：71755：72）at Object.getGlobalDiagnostics（C：\ Program Files\nodejs\node_modules\npm\bin\node_modules\TypeScript\lib\tsc .js：73528：86）buildSingleProject（C：\ Program Files\nodejs\node_modules\npm\bi n\node_modules\TypeScript\lib\tsc.js：75803：127）

./ front/tsconfig.jsonの内容：

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/front-bundle.js",
        "paths": {"@shared/*" : ["../shared/*"]},
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ],
    "references": [
        {
            "path": "../shared"
        }
    ]
}

./ shared/tsconfig.jsonの内容：

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/shared-bundle.js",
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}
typescriptproject-structure
11
Dorad

ここでの最後のアクティビティの後で少しは解決しましたが、以下の変更が原因で起こったかどうかは100％わかりませんでした。まだ新しい見解と投票があるので、とにかくここに投稿しています。

それが変化でした：

./ shared/tsconfig.jsonの内容：の代わりに：

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "out": "./lib/shared-bundle.js", <-------------
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}

使用する：

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "composite": true,
        "declaration": true,
        "module": "AMD",
        "noEmitOnError": true,
        "noImplicitAny": false,
        "outDir": "./lib/", <-------------
        "preserveConstEnums": true,
        "removeComments": true,
        "rootDir": "./src", <-------------
        "sourceMap": true,
        "target": "es2015",
        "watch": true
    },
    "include": [
        "./src/**/*.ts",
    ]
}
2
Dorad

表示されるエラーを再現できますiffront、backおよびsharedを含むディレクトリに誤ったtsconfig.jsonがあります。この場合、tsc -bを実行すると、現在のディレクトリ内の誤ったtsconfig.jsonが取得されます。正しいpathsなどで構成されていないため、コンパイルは失敗し、同じエラーが発生します。

それ以外の場合、ファイルを使用してtsc -b frontではなくtsc -bを発行すると、エラーなしでコンパイルされます。

VSCodeが問題に遭遇しない理由は、補完を提供するために、TypeScriptエディターが（通常）tsserverと呼ばれるTypeScriptによって提供されるツールを使用するためです。そして、エディターがtsserverへのファイルパスを指定すると、tsserverは、ソースファイルを含むディレクトリを検索して関連するtsconfig.jsonを取得し、次に親ディレクトリまで続きます。 tsconfig.jsonファイルを見つけます。したがって、VSCodeがfront/src/foo.tsで機能し、tsserverに補完を提供するように要求すると、tsserverは一致するファイルがないfront/srcを検索し、次にfrontを検索して、tsconfig.jsonを見つけます。

1
Louis

これは完全にあなたの質問に直接答えることはできませんが、代替案を提供することはまだ有用だと思います。

これを「より標準的な」方法で解決する1つの方法は、3つのコードベースをすべてNPMパッケージにすることです。

この方法では、インポートは@vendor/shared/fooではなく../../../../shared/src/articleのようになります。

npm linkを使用すると、プロジェクトの相互依存関係に簡単に取り組むことができます。

技術的にはソース構造を変更する必要さえありません（たぶんあなたがしたいかもしれませんが）。 shared依存関係は、node_modulesを介してソフトリンクされるだけです。

0
Evert

ルートフォルダーからコンパイルする場合は、ローカルtsconfig.jsonすべてのreferencesが設定されたファイル、つまりreferences: { path: './shared' }。そうしないと、tscはビルドする関連プロジェクトを見つけられません。

さらに、ルートがないtsconfig.jsonはしないVSCode GUIがルートを探すときに正しく機能するようにしますtsconfig.json（これは前回チェックしたときの状態です。ここに 関連する問題 があります）。

エラーは、不足しているファイルに関連しているようです。実行する構築手順の詳細を提供できる場合は、それをよりよく確認することができます

0
leonardfactory