Webpackを使用してグローバル参照に外部スクリプトを含める

Question

Webpack 2を使用して古き良きjavascriptコードをパッケージ化するために取り組んでいます。このコードでは、Leaflet 1.0ライブラリを使用しています。リーフレットが公開するグローバル変数Lを参照するLeafletプラグイン（Google.jsという）も含まれています。

現在のhtmlページでは、リーフレット、次にプラグイン（Google.js）が読み込まれ、map1.jsコードがスクリプトタグを介して読み込まれます。どちらがうまくいくの？

私は、次のwebpack.config.jsを作成しました：

var path = require('path'); 

module.exports = { 
    devtool: 'cheap-eval-source-map', 
    entry: { 
    map1: './js/map1.js' 
    }, 
    output: { 
    filename: 'bundle.js', 
    path: path.resolve(__dirname, 'dist') 
    } 
}; 

をしてmap1.jsに、私はWebPACKのための依存関係の要件を定義するには、以下を追加しました：

import bootstrap from 'bootstrap'; 
import leaflet from 'leaflet'; 
require('script-loader!./lib/Google.js'); 

bundle.jsは、しかし、とき問題なくビルドしますページ読み込み：

Uncaught TypeError: Cannot read property 'call' of undefined 
    at NewClass.whenReady (eval at (bundle.js:79), :3641:12) 
    at NewClass.addLayer (eval at (bundle.js:79), :4057:8) 
    at eval (eval at (bundle.js:176), :118:7) 
    at eval (eval at (bundle.js:176), :232:3) 
    at Object. (bundle.js:176) 
    at __webpack_require__ (bundle.js:20) 
    at bundle.js:66 
    at bundle.js:69 

エラーが発生したライン79を見ると0

は：

eval("var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_RESULT__;/*\n Leaflet 1.0.3, a JS library for interactive maps...

それはリーフレットコードのevalのをやって上の失敗に表示されます。リーフレットをウェブパックに組み込むために何か他のことをしなければならないのでしょうか？

Answer 1

は、私はちょうど代わりにLeaflet.GridLayer.GoogleMutantを使用して、非常に単純なWebPACKのプロジェクトを試みたが、それは魔法のように動作：限り、あなたはあなたのHTML内の別の<script>でGMaps JSのAPIを参照するように動作します

import 'leaflet'; 
import 'leaflet.gridlayer.googlemutant'; 

var map = L.map('map').setView([0,0],0); 
var roadMutant = L.gridLayer.googleMutant({      
    maxZoom: 24,     
    type:'roadmap'     
}).addTo(map); 

。もちろんnpm install leaflet leaflet.gridlayer.googlemutantです。