使用 Webpack 包含具有全局引用的外部脚本

Question

我正在使用 Webpack 2 打包一些旧的 javascript 代码。此代码使用 Leaflet 1.0 库，还包括一个 Leaflet 插件（名为 Google.js），该插件仅引用 leaflet 公开的全局 L 变量。

在当前 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行：

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

评估传单代码似乎失败了。我应该做些什么来将 Leaflet 合并到我的 webpack 构建中吗？

Answer 1

我刚刚使用 Leaflet.GridLayer.GoogleMutant 尝试了一个非常简单的 webpack 项目，它的效果非常好：

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);

只要您在 HTML 的单独 <script> 中引用 GMaps JS API，它就可以工作。当然还有npm install leaflet leaflet.gridlayer.googlemutant。

使用 Webpack 包含具有全局引用的外部脚本

Including external scripts with global references using Webpack

javascript

leaflet

webpack-2