web-dev-qa-db-ja.com

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

私はtsconfig.jsonで path-mapping について読んでいましたが、次のような見苦しいパスを使わないようにしたいと思いました。

enter image description here

プロジェクトとライブラリを含むモノリポジトリがあるので、プロジェクトの組織は少し変わっています。プロジェクトは会社別とブラウザ/サーバー/ユニバーサル別にグループ化されています。

enter image description here

次の代わりにtsconfig.jsonでパスを設定するにはどうすればよいですか。

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

私は使えます：

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

Webpackの設定で何か他に必要なものはありますか？それともtsconfig.jsonで十分ですか？

typescriptnode-modulestsconfig
102
Remo H. Jansen

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を取ることを心に留めておいてください、そしてそれはdocに記述されているように必須です。

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

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

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

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

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

UPDATE1つのファイルにマッピングする方法を紹介するために作成したこの例を調べてください。

https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea

161
Alejandro Lora

baseUrlとpathsのドキュメント を組み合わせて使用​​できます。

Rootが一番上のsrcディレクトリにあると仮定します（そして私はあなたのイメージを正しく読みます）

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

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

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

アスタリスクでこの同様の解決策をチェックしてください

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

Alejandros答えは私のために働きました、しかし私がawesome-TypeScript-loaderをwebpack 4と共に使っているので、私はまた私のwebpack.configファイルに tsconfig-paths-webpack-plugin を加えなければなりませんでした正しく解決するために

4
James Moran

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

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

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

そこで、私は自分で解決策を書いた、 tscpaths 。

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

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

3
Joon

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
eeglbalazs

/はルートからのみ始まり、相対パスを取得するために./または../を使用する必要があります

0
Vipindas Gopalan

これは私のために働く：

 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'
0
FacePalm

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

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]/...";

その外観はシンプルで、素晴らしく、そしてもっと読みやすくなっています。

0
Vijay

"paths" anylongerにtsconfig.jsonを設定することを許可しないReactの更新があったようです。

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

これにより、configおよびscriptsディレクトリとbuild/configファイルがプロジェクトに追加され、すべてのcreate-react-scripts設定が削除されます。これはまた、{project}/config/*ファイルを更新することによって、すべてがどのように構築されているかなど、より多くの制御を可能にします。

tsconfig.jsonを更新してください

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