1

私は Typescript で書かれた Angular 2 アプリケーションに取り組んでいます。これは webpack を ts-loader と組み合わせて使用​​してすべてをまとめています。

さまざまなビルド出力に対応するために webpack の resolve.alias に大きく依存しており、問題に遭遇しました。

特定のビルドを実行すると、ts-loader は、現在のビルドで使用されているモジュールが見つからないというエラーをスローします。これは、エイリアスが別のファイルを指しているためだと思います。

例: ファイル: myApp.ts

import {Logger} from 'logger';

export class myApp {}

2 つのエイリアス JSON ファイルがあります。

  • ビルド A は remoteSystemLogger を使用し、
  • ビルド B は consoleLogger を使用します

これで、各ロガー クラスは相対的な依存関係をインポートします。例えば：

ファイル: remoteSystemLogger.ts

import {HTTP} from 'http';

export class Logger {}

問題は、ビルド B を実行すると、次のようなエラーが表示されることです。

remoteSystemLogger.ts のエラー

エラー TS2307: モジュール 'http' が見つかりません。

http と remoteSystemLogger は現在、ビルド B のエイリアス JSON ファイルで指定されていません。ビルド B はそれに依存していないはずだからです。

webpack ビルドに使用されるエイリアス ファイルは、ビルド時にパラメータによって決定されます。

これは webpack config で使用される解決の例です

let moduleAliasingConfig = `./alias/${buildType}.json`

 // ....

resolve: {
    root: [
      path.resolve('.'),
      path.resolve('node_modules')
    ],
    alias: moduleAliasingConfig,
    extensions: ['', '.ts', '.js']
  },

ts-loader の設定は次のとおりです。

loaders: [
    {test: /\.ts$/, loaders: ['ts'], exclude: [/\.(spec|e2e)\.ts$/]}
]

何かを誤って設定したのか、それともローダー、webpack のリゾルバー、またはエイリアシングのしくみに関する私の理解の問題なのかはわかりません。

私の理解では、その webpack は、エイリアス ファイルとエントリ ポイントに基づいて、インポート/依存関係ツリーをトラバースします。

追加の環境情報:

package.json のセットアップ:

  • "ts-loader": "^1.2.1",
  • "webpack": "^1.13.0"
4

0 に答える 0