webpackにライブラリのumdバンドルをロードさせる方法

Question

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

私はこのように（角度@ /アップグレード）ライブラリをインポート

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

角度アップグレードライブラリーは、以下のツリー構造（簡体字）で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をロードするmy importステートメントを解決します。これは、コードの残りの部分にバンドルされてエラーを生成するES6ファイルです。 UMDバンドルに右メイン定義ポインティングが含まれてい

私はWebPACKの代わりにやってみたいことは、角度/アップグレード/静的/ package.json @ロードされ

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

達成できるということですか？

おかげで、 甲

Answer 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' 
     } 
    }, 

Answer 2

はimport UpgradeModule from '@angular/upgrade/bundles/upgrade-static.umd.js';仕事をしていますか？

package.jsonがnpmモジュールのルートレベルにある場合、Webpackはpackage.jsonのmainの後にしかないので、この場合は直接必要なファイルにアクセスする必要があります。