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

我正在使用Webpack 2来封装一些旧式JavaScript代码。此代码使用Leaflet 1.0库，并且还包含一个Leaflet插件（名为Google.js），该插件仅引用小册子公开的全局变量L。使用Webpack包含具有全局引用的外部脚本

在当前的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...

它似乎没有做好小叶代码的一个eval。我应该做其他事情来将Leaflet合并到我的webpack构建中吗？

来源

2017-03-07 timbo

它看起来像是一个源地图评估问题，你真的需要'廉价评估源地图'还是它可以是任何源地图配置？您是否尝试过使用'inline-source-map'？ –

我已经删除了'webpack.config.js'中的'devtool'行。不幸的是，在硬刷新时出现相同的错误信 – timbo

我只是想用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中引用GMaps JS API在一个单独的<script>，将工作。当然，还有npm install leaflet leaflet.gridlayer.googlemutant。

来源

2017-03-07 10:28:43 IvanSanchez

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

回答

相关问题