1

webpack をパッケージ バンドラーとして使用する angular1 + angular2 ハイブリッド アプリケーションを作成しています。

私のコードでは、この方法でライブラリ (@angular/upgrade) をインポートします

import { UpgradeModule } from '@angular/upgrade/static';

Angular アップグレード ライブラリは、次のツリー構造 (簡略化) を持つ node_module フォルダーにあります。

@angular/upgrade
├── bundles
│   ├── upgrade-static.umd.js
│   ├── upgrade-static.umd.min.js
│   ├── upgrade.umd.js
│   └── upgrade.umd.min.js
├── index.d.ts
├── index.js
├── index.js.map
├── index.metadata.json
├── package.json
├── static
│   └── package.json
├── static.d.ts
├── static.js.map
├── static.metadata.json
└── static.js

問題は、デフォルトで webpack が @angular/upgrade/static.js をロードする import ステートメントを解決することです。ES6 ファイルは、残りのコードにバンドルされるとエラーを生成します。

代わりに webpack に実行してもらいたいのは、umd バンドルを指す正しいメイン定義を含む @angular/upgrade/static/package.json をロードすることです

{"main": "../bundles/upgrade-static.umd.js"}

それは達成可能ですか？

ありがとう、ギャブ

4

2 に答える 2

1

ここで説明されているモジュールの解決: https://webpack.github.io/docs/resolving.html は、デフォルトで上で説明したことを実行できるはずですが、それを達成するには、resolve.aliasプロパティを使用する必要がありました。私が使用した構成は次のとおりです。

resolve: {
        extensions: [ '.js', '.ts', '' ],
        modulesDirectories: [ path.resolve( __dirname, 'node_modules' ) ],
        alias: {
            '@angular/upgrade/static$': '../../node_modules/@angular/upgrade/bundles/upgrade-static.umd.js'
        }
    },
于 2017-01-03T08:51:51.720 に答える