現在、TypeScriptで記述された複数のNodeモジュールで構成され、node_modules
ディレクトリにインストールされているTypeScriptアプリケーションで作業しています。
続行する前に、TypeScript 2.0を使用していることに注意してください。必要に応じて2.1 devリリースを使用しても不利ではありません。これを機能させたいだけです。
各Nodeモジュールの構造は、次の行に沿ったものです。
dist/
es2015/
index.js
utils/
Calculator.js
Calculator.d.ts
Date.js
Date.d.ts
Flatpack.js
Flatpack.d.ts
src/
index.ts
utils/
Calculator.ts
Date.ts
Flatpack.ts
Distフォルダーは生成されたソースであり、このパスはtsconfig.json
ファイル内のoutDir
を使用して構成されます。また、package.json
のmain
プロパティをdist/es2015/index.js
に設定しました。
注意すべき重要事項:
moduleResolution
type of node
を使用しています。packagename/
経由でパッケージをインポートしています。今私の質問/問題が来ます。このモジュールからファイルをインポートしている間、これをできるようにしたいと思います:
import {Sin, Cos, Tan} from "common-utils/utils/Calculator";
ただし、ファイルはdist/es2015/utils
ディレクトリに解決できません。理想的には、インポートは、ルートからではなく、この特定のdist
フォルダーから解決するようにしたいと思います。
上記のインポートを機能させるには、次のように記述する必要があります。
import {Sin, Cos, Tan} from "common-utils/dist/es2015/utils/Calculator";
ただし、毎回dist/es2015
と書くのは理想的ではなく、インポートの一部が本当に長く見えるだけです。 dist/es2015
ディレクトリに解決するようにモジュールを構成する方法はありますか?プロジェクト内でオーバーライドを設定する必要はありません。理想的には、各モジュールがファイルの解決元を指定します。
Jspmで使用するプラグイン/モジュールを作成するときにJspmで私が何を求めているのかわからない(そしてこれが混乱する場合は謝罪します)場合は、モジュールのpackage.json
の内部を指定できます。以下:
"jspm": {
"registry": "npm",
"jspmPackage": true,
"main": "my-module",
"format": "AMD",
"directories": {
"dist": "dist/AMD"
},
TypeScriptで上記に相当するものを探しています(存在する場合)。マッピングディレクティブ。エンドユーザーがnpm install my-cool-package
を実行し、アプリで何かをインポートしようとすると、デフォルトですべてのインポートがcommonjs
ディレクトリに解決されます(上のJspmの例はAMDを使用しますが、同じ前提)。
これは可能ですか、ここで何かを誤解していますか?いくつかの新しいパスマッピング機能が最新リリースに追加されたことは知っていますが、それらの使用に関するドキュメントはほとんど存在しません。
あなたのコメントを読んだ後、私はあなたの質問を誤解していることに気付きました!インポートしたパッケージの観点からパスを制御する場合は、package.json
のmain
プロパティを、モジュールのオブジェクトグラフを適切に表すファイルに設定するだけです。
{
"main": "common-utils/dist/es2015/index.js"
}
プロジェクトの観点からインポートパスを制御しようとしている場合、あなたが探しているのは、モジュール解決のためのTypeScript 2の新しいパスマッピング機能です。次のようにtsconfig.json
を構成することにより、パスマッピングを有効にできます。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"angular2/*": ["../path/to/angular2/*"],
"local/*": ["../path/to/local/modules/*"]
}
}
}
次に、TypeScriptファイルで、次のようにモジュールをインポートできます。
import { bootstrap } from 'angular2/bootstrap';
import { module } from 'local/module';
TypeScript 2のパスマッピング機能の詳細については、「 このGithubの問題 」を参照してください。
あなたの場合、次の設定が機能するはずです。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"common-utils/utils/*": ["./node_modules/common-utils/dist/es2015/utils/*"]
}
}
}
パスを使用している場合、tsc
を使用してTypeScriptをプレーンjavascriptにコンパイルした後に機能するために、絶対パスを相対パスに戻す必要があります。
これに対する最も一般的なソリューションは、これまで tsconfig-paths でした。
私はそれを試しましたが、私の複雑なセットアップではうまくいきませんでした。また、実行時にパスを解決します。つまり、パッケージサイズの観点からオーバーヘッドが発生し、パフォーマンスが解決されます。
だから、私は自分で解決策を書いた tscpaths 。
コンパイル時にパスを置き換えるため、全体的には優れていると思います。これは、実行時の依存性やパフォーマンスのオーバーヘッドがないことを意味します。使い方はとても簡単です。ビルドスクリプトにpackage.json
の行を追加するだけです。
このプロジェクトはかなり若いため、セットアップが非常に複雑な場合、いくつかの問題が発生する可能性があります。私の設定はかなり複雑ですが、私の設定では問題なく動作します。