typescriptハンドブック：rootDirsを持つ仮想ディレクトリ

Question

handbookのrootDirsを使用した仮想ディレクトリのセクションの最初の例では、別のソースフォルダから異なるrootDirsをマージしてモジュールをインポートできます。

// File Structure 
src 
└── views 
    └── view1.ts (imports './template1') 
    └── view2.ts 

generated 
└── templates 
     └── views 
      └── template1.ts (imports './view2') 


// Setting 
{ 
    "compilerOptions": { 
    "rootDirs": [ 
     "src/views", 
     "generated/templates/views" 
    ] 
    } 
} 

モジュールをインポートするときに、あなたがrootDirに記載されているパスを省略することができます注意してください。

私が理解していないことは、2番目の例です。

{ 
    "compilerOptions": { 
    "rootDirs": [ 
     "src/zh", 
     "src/de", 
     "src/#{locale}" 
    ] 
    } 
} 

「コンパイラはツーリングの目的のために'./zh/messages'からメッセージをインポートする'./#{locale}/messages'からインポートメッセージを解決します」。

• なぜですか？
• #{locale}は、建築プロセスでzhと交換されていますか？
• ./#{locale}/messagesで相対パスを使用するのはなぜですか？インポートファイルがsrc/folderA/にある場合はどうなりますか？
• src/zhがrootDirとしてマージされている場合、インポートするには/messagesにしてはいけませんか？

この例ではファイル構造が表示されないため、混乱しています。応答を楽しみにしています。ありがとう！

---

アップデート2017年12月21日

私は、フォルダ構造を推定しようとしている：

src 
└── zh 
     └── messages 
└── de 
     └── messages 
└── app.ts (import messages from './#{locale}/messages') 

第1の実施例によれば、これらすべてのrootDirsが仮想distにコピーされますディレクトリに格納されており、相互に参照するようになっています。

dist 
└── messages (zh, de got conflict here!) 
└── app.ts 

• 競合が発生するはずです。ではない？

Answer 1

これは説明するのに役立ちます。

多くのビルドツールやデプロイメントツールでトークンを入力することができ、そのトークンは後でツールで置き換えられます。私は私のモジュールにこのコード行を持っている場合たとえば、私はアプリのドイツ語版を構築していた場合

import messages from './#{locale}/messages'; 

は、ビルドツールは、例えば、ビルドに関係する値で#{locale}トークンを交換しますそれはdeに置き換えられます。

ここでの問題は、ビルド/デプロイメントツールがこれを行うことを知らないことです。そのため、実際のパスとともにrootDirsにトークン化されたパスを指定すると、コンパイラとエディタは、トークン化されたパスを渡るたびに

Q &

なぜ？

多くの人がビルドやリリースにトークンを使用するためです。

＃{locale}は建築プロセスでzhに置き換えられましたか？

TypeScriptコンパイラではなく、「他のツール」によって。たとえば、Octopus Deployにはこの機能があります。

私たちは./#{locale}/messagesで相対パスを使用していますか？

これはトークン化されたURLの使用方法の例です。それはrootDirsの機能を利用して行われます。

インポートするファイルがsrc/folderA /にある場合はどうなりますか？インポートする/メッセージのsrc/ZHはROOTDIRとマージされていることを考えると

import messages from '../#{locale}/messages'; 

、すべきではありませんか？

あなたははまだすなわち

import messages from 'de/messages'; 

...ルートディレクトリとしてこれらのフォルダを使用しますが、一例では、パスをトークン化する方法について本当にであることができます。

import messages from './#{locale}/messages';