[解決済み] TypeScript インポートパスエイリアス

質問

私は現在、TypeScriptで書かれた複数のNodeモジュールで構成されるTypeScriptアプリケーションに取り組んでいます。 node_modules ディレクトリにインストールされています。

続ける前に、私はTypeScript 2.0を使っていることを記しておきたい。必要であれば2.1の開発版も使うことに抵抗はない。私はただ、これを動作させたいだけなのです。

各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 フォルダが生成されるソースで、このパスの指定は outDir の中で tsconfig.json ファイルの中にあります。また main プロパティで package.json を dist/es2015/index.js .

重要な注意点

• 私のプロジェクトでは moduleResolution 型の node
• TypeScript 2.0を使用しています。
• パッケージの中からファイルをインポートする方法を聞いているのではありません。私はNpm経由でパッケージをインストールし、それを packagename/ を通してインポートしています。

ここで、私の質問/問題が発生します。このモジュールからファイルをインポートしている間、私はこれを行うことができるようにしたいと思います。

import {Sin, Cos, Tan} from "common-utils/utils/Calculator";

しかし、このファイルでは dist/es2015/utils ディレクトリに解決できません。理想的には、インポートがこの特定の dist フォルダから解決されるのが理想的です。

上記のimportは、以下のように書かないとうまくいきません。

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 を使用していますが、前提は同じです)。

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

どのように解決するのですか?

あなたのコメントを読んだ後、私はあなたの質問を誤解していたことに気づきました! インポートされたパッケージの視点からパスを制御したい場合、単に main プロパティを設定します。 package.json を、モジュールのオブジェクトグラフを適切に表現するファイルに変換します。

{
  "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 の Path Mapping 機能の詳細については、以下を参照してください。 このGithubの課題 .

あなたの場合、以下のような構成でうまくいくと思います。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "common-utils/utils/*": ["./node_modules/common-utils/dist/es2015/utils/*"]
    }
  }
}