tsconfig.jsonでパスを使うには？

私はtsconfig.jsonのpath-mappingについて読んでいて、以下のような醜いパスの使用を避けるためにそれを使いたいと思いました。

.

プロジェクトとライブラリを含むモノリポジトリを持っているので、プロジェクトの構成が少し変です。プロジェクトは会社ごとに、またブラウザ/サーバー/ユニバーサルごとに分類されています。

.

どのようにすれば、tsconfig.jsonの中のパスを設定することができますか？

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

とすることができます。

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

webpackの設定で何か他のものが必要になるのでしょうか？それともtsconfig.jsonで十分なのでしょうか？

Sagar Zala
編集された質問 31日 10月 2018 в 6:01
プログラミング
node-modules typescript tsconfig
7日 4月 2017 в 3:20
まだビューはありません
ソリューション

これは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

アップデイト(英語) 1つのファイルにマッピングする方法を紹介するために作ったこの例を見てください。

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

Alejandro Lora
編集した答え 3日 12月 2018 в 11:31
解説 (17)

baseUrlとpaths`を組み合わせて使うことができますdocs。

ルートが最上位のsrcディレクトリにあると仮定して（そしてあなたのイメージを正しく読んで）、以下を使用します。

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

webpack`では、module resolutionを追加する必要があるかもしれません。webpack2 "の場合は以下のようになります。

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}
解説 (0)

typecript + 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 の高度なパス解決 を参照してください。

解説 (0)