web-dev-qa-db-ja.com

TypeScriptインポートパスエイリアス

現在、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を使用しています。
  • TypeScript 2.0を使用しています
  • パッケージ内からファイルをインポートする方法を尋ねていません。 Npm経由でパッケージをインストールし、このモジュールを使用しているアプリケーション内から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を使用しますが、同じ前提）。

これは可能ですか、ここで何かを誤解していますか？いくつかの新しいパスマッピング機能が最新リリースに追加されたことは知っていますが、それらの使用に関するドキュメントはほとんど存在しません。

typescripttypescript2.0
49
Dwayne Charrington

あなたのコメントを読んだ後、私はあなたの質問を誤解していることに気付きました！インポートしたパッケージの観点からパスを制御する場合は、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/*"]
    }
  }
}
105
fny

パスを使用している場合、tscを使用してTypeScriptをプレーンjavascriptにコンパイルした後に機能するために、絶対パスを相対パスに戻す必要があります。

これに対する最も一般的なソリューションは、これまで tsconfig-paths でした。

私はそれを試しましたが、私の複雑なセットアップではうまくいきませんでした。また、実行時にパスを解決します。つまり、パッケージサイズの観点からオーバーヘッドが発生し、パフォーマンスが解決されます。

だから、私は自分で解決策を書いた tscpaths 。

コンパイル時にパスを置き換えるため、全体的には優れていると思います。これは、実行時の依存性やパフォーマンスのオーバーヘッドがないことを意味します。使い方はとても簡単です。ビルドスクリプトにpackage.jsonの行を追加するだけです。

このプロジェクトはかなり若いため、セットアップが非常に複雑な場合、いくつかの問題が発生する可能性があります。私の設定はかなり複雑ですが、私の設定では問題なく動作します。

4
Joon