私は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
で十分なのでしょうか?
これは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';
ただ、現在の最新バージョンではインテリセンスが機能しないので、ファイルのインポート/エクスポートにはインデックス規約に従うことをお勧めします。
アップデイト(英語) 1つのファイルにマッピングする方法を紹介するために作ったこの例を見てください。
https://github.com/ialex90/TypeScript-Node-Starter/commit/a4e8cc1f8f8d5176e0099e05b51f97b0ef4bebea
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'
]
}
}
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 の高度なパス解決 を参照してください。