tsconfig.jsonでパスを使用する方法


166

私は約読んでいたパス・マッピングtsconfig.json、私は以下の醜いのパスを使用しないようにそれを使用したいです:

ここに画像の説明を入力してください

プロジェクトとライブラリを含む単一リポジトリがあるため、プロジェクトの構成は少し奇妙です。プロジェクトは、会社ごと、ブラウザ/サーバー/ユニバーサルごとにグループ化されています。

ここに画像の説明を入力してください

パスを次のtsconfig.jsonように構成するにはどうすればよいですか:

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

私は使えます:

import { Something } from "lib/src/[browser/server/universal]/...";

webpack設定で他に何か必要ですか?またはtsconfig.json十分ですか?


回答:


268

これはTS機能であるため、tsconfig.jsonファイルで設定できます。

あなたはこのようにすることができます:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

参照するパスは、baseUrlが参照先のルートのベースとして使用され、ドキュメントに記載されているように必須であることを覚えておいてください。

文字「@」は必須ではありません。

そのように設定したら、次のように簡単に使用できます。

import { Yo } from '@config/index';

あなたが気づくかもしれない唯一のことは、インテリセンスが現在の最新バージョンでは機能しないということですので、ファイルのインポート/エクスポートについてはインデックスの規則に従うことをお勧めします。

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping


36
他の人を助けるかもしれないコメントだけ... node.jsまたはwebpackのようなモジュールバンドルを使用しない環境で作業している場合は、さらにnpmjs.com/package/module-aliasモジュール
Remo H

2
@Alejandro Loraプロジェクトでこのソリューションを使用しましたが、チャームのように機能しますが、ngテストを実行すると、カルマが環境変数を解決できません。その理由は何でしょうか?
ガビシッダガダギ18

1
これは完全に正常に動作しますが、宣言を有効にしてこのnpmモジュールを別のモジュールにインポートすると問題が発生します。Intelisenseが壊れます。この問題を修正する方法に関するアイデアはありますか?
Siva

1
@Aphaxはい。それは単一のファイルにマップすることができます、私はここに例を準備: github.com/ialex90/TypeScript-Node-Starter/commit/...
アレハンドロLORA

2
jest-testはtsconfig-pathsを使用しないことに注意してください-を定義する必要がありますmoduleNameMappertsjest#414
TmTron

13

baseUrlpaths docsの組み合わせを使用できます。

ルートが最上位のsrcディレクトリにあると仮定します(そして私はあなたのイメージを適切に読みます)

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

以下のためにwebpackあなたにも追加する必要があるかもしれませんモジュールの解像度をwebpack2これはのようになります。

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}

12

アスタリスクでこの同様のソリューションを確認してください

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },


6

パスを使用している場合は、を使用してtypescriptを単純なjavascriptにコンパイルした後に、絶対パスを相対パスに戻して機能させる必要がありますtsc

これに対する最も一般的な解決策は、これまでのところtsconfig-pathsです。

試してみましたが、複雑な設定ではうまくいきませんでした。また、実行時にパスを解決します。つまり、パッケージサイズの面でオーバーヘッドが発生し、パフォーマンスが解決されます。

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

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

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


3

typescript + webpack 2 + at-loaderが使用されている場合、追加のステップがあります(@mlekoのソリューションは私にとって部分的にしか機能しませんでした):

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

TypeScript 2.0の高度なパス解決


2

これは私にとってはうまくいきます:

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

これにより、tsconfig.json内のすべてのパスがロードされます。tsconfig.jsonの例:

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

これが機能するために、baseUrlとパスの両方があることを確認してください

そして、あなたは次のようにインポートすることができます:

import {AlarmIcon} from 'assets/icons'

1

以下のコードの代わりに、その種類の相対パス

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

「../../../../../」の見た目がおかしく、読みにくくなることを回避できます。

Typescript設定ファイルにも同じ答えがあります。baseUrlを指定するだけで、configが相対パスを処理します。

設定方法: tsconfig.jsonファイルに以下のプロパティを追加します。

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

最終的には以下のようになります

import { Something } from "@app/src/[browser/server/universal]/...";

その見た目はシンプルで、見やすく、読みやすくなっています。


1

これを使用してコンパイラー操作をチェックアウトします

以下のようなプロジェクトのファイルにbaseUrlを追加しました。

"baseUrl": "src"

正常に動作しています。したがって、プロジェクトのベースディレクトリを追加します。



0

Reactのアップデートがあり"paths"tsconfig.jsonもはやをに設定できないようです。

Nicely Reactは警告を出力するだけです。

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

次に、を更新し、セクションtsconfig.json全体を削除"paths"します。この実行を回避する方法があります

npm run eject

これcreate-react-scriptsによりconfigscriptsディレクトリとビルド/構成ファイルがプロジェクトに追加され、すべての設定が削除されます。これによりすべてのビルド方法、名前の付け方などを、{project}/config/*ファイルをできます。

次に、 tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.