Question

我正在使用需要回调的Google Maps API。如何从Webpack包导出回调以供外部脚本（如Google Maps API？

）使用

HTML（X-d out键）：

<div id="hello"></div>
<script src="/js/map.bundle.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&callback=initMap"></script>

map.js：

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}

我将上面的map.js文件构建到名为map.bundle.js的webpack包中。

浏览器控制台错误：

Yc消息：＆＃34; initMap不是函数＆＃34; name：＆＃34; InvalidValueError＆＃34; stack：＆＃34;错误↵在新的Yc（https://maps.googleapis.com/ma ...

我也尝试添加

module.exports = { initMap: initMap }

到map.js，但这没有用。

编辑：同样的问题，但是对于在表单事件中使用webpack包中的javascript函数：

HTML：

<form onsubmit="sayHello(event)">
    <button type="submit">Say Hello</button>
</form>

JS：

function sayHello(e) {
    e.preventDefault();
    console.log("hello");
    return false;
}

当JS打包成捆绑包时，＆＃34;你好＆＃34;不再在控制台上打印

Answer 1

您的webpack文件（map.bundle.js）通常不会将您的任何函数或变量写入global（在本例中为window）命名空间。

这会导致需要在jQuery或google maps api等全局命名空间上的库出现问题。

解决此问题的一种方法是将initMap添加到窗口对象

var $ = require("jquery");
function initMap() {
    $("#hello").text("hello world");
}
window.initMap = initMap;

webpack包中的导出功能

1 个答案: