web-dev-qa-db-ja.com

TypeScriptプロジェクトのディレクトリ構造

TypeScriptプロジェクトの慣用的なディレクトリ構造は何ですか？

このような構造に次の機能が必要です。

  1. TypeScriptソースコードとトランスコンパイルされたJavaScript用の個別のディレクトリ
  2. プロジェクトのソースコードとテストコードの個別のディレクトリ
  3. テストおよびソースコード全体で参照を解決するメカニズム。
typescriptdirectory-structureconventionstypescript1.8
25
codematix

間違っていたようです。私は次の構造を試していました：

src
|---- lib
|-----|---- mymodule.ts
|---- tests
|-----|---- mymodule.tests.ts

ただし、libの下のテストコードとは別に、testsディレクトリの下のソースコードをコンパイルしようとしました。

find src/lib -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir lib

そして、テストコード：

find src/tests -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir tests

これにより、testsフォルダに別のlibサブディレクトリとtestsサブディレクトリが作成されました。これは私が意図したものではありませんでした。

私の問題を解決するために、それらを一緒にコンパイルする必要があったので、私のコマンドは次のとおりです。

find src -name *.ts | xargs tsc --declaration --sourceMap --module commonjs --target es5 --listFiles --outDir .

助けてくれてありがとう。

5
codematix

生成されたJSをソースTSから分離する

単一ファイルの出力を生成することをお勧めします。ブラウザであろうとNodeであろうと、それはまさにより良いアイデアです。ほとんどのIDEでは_.gitignore_ dファイルを非表示にできるため、_.js_ファイルを適切に配置しても、整頓されたファイルペインshould n'tを達成するのは問題です。 _.ts_ファイルの隣。

can技術的に _--outDir_ を使用して、_tsconfig.json_を適切に設定することにより、希望する方法を出力します。

テストをソースから分離する

これはかなり簡単です！ _/tests_を維持するだけです。インポートは、単に_import {MyClass} from "../src/modules/my-class"_（_../_が_/tests_から抜け出すために）のようなディレクトリトラバーサルによって機能します。

参照を解決するメカニズム

これは、ブラウザではNode — TypeScriptのデフォルトでrequiresを使用している場合よりも困難です。

ブラウザで

webpackのようなものを使用することを強くお勧めしますが、危険な側面での生活を主張する場合は、ビルドプロセスを設定せずにTypeScriptコードをすばやく反復するために使用するブラウザーフレンドリーな要件があります。

ブラウザの場合はrequire()

  • 弱者向けではありません— これはあなたが蓄積する技術の負債です

動作するWebインポートには絶対パスが必要なため、TypeScriptでrequire()ハックを使用する方法を次に示します（通常、再構築を必要としない高速デバッグセッション用）。

_/entities/user.ts_

_import {Username} from "../entities/username";
import {Password} from "../entities/password";

export class User {
    username: Username;
    password: Password;
}
_

UsernameとPasswordは、それぞれ_/entities/username.ts_と_/entities/password.ts_のexportedクラスです。

_../entities/_は無関係に見えるかもしれませんが、ブラウザがUsernameおよびPasswordエンティティへの適切な絶対パスを持つことが不可欠であることに注意してください。 :)

11
Angad

これはプロジェクトのサイズ、ツール、プラットフォームなどに大きく依存するため、具体的なアドバイスをすることは非常に困難です。

  1. TypeScriptコンパイラには--outDirオプションがあり、これを使用して別のディレクトリに出力できます。ただし、デバッグ用にもmapファイルを作成している限り、単一のファイルへの出力の方が望ましいため、バンドルすることもできます。たとえば、Gulpを使用すると、これらすべてを非常にうまく構成できます。
  2. これはディレクトリ構造と何の関係がありますか？分割する場合は、分割します
  3. 「メカニズム」は非常に広く、使用するツールによって異なります。たとえば、テストランナーは、テストコードの前に製品コードを「インポート」できる場合があります。モジュールロードライブラリなども使用できます。
3
Denis Biondic