Question

我正在使用Webpack 2打包一些古老的javascript代码。此代码使用Leaflet 1.0库，还包含一个Leaflet插件（名为Google.js），它简单地引用了传单公开的全局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

1 个答案: