webpack包中的導出函數

我正在使用需要回調的Google Maps API。如何從webpack包中導出回調以供外部腳本（如Google Maps API）使用？webpack包中的導出函數

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 message : "initMap is not a function" name : "InvalidValueError" stack : "Error↵ at new Yc (https://maps.googleapis.com/ma ...

我也嘗試添加

module.exports = { initMap: initMap }

到map.js但這並沒有幫助。

EDIT：同樣的問題，但對於使用形式事件從的WebPack束JavaScript函數：當JS包裝

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

：

HTML：

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

JS成捆，「控制檯」不再印在控制檯上

來源

2017-02-13 BlackSheep

出口模塊需要首先需要到一個變量，你會得到一個導出的對象，那麼你可以打電話給你的導出函數。 'var initMapDep = require（'./ js/map.bundle'）; initMapDep.initMap（）; ' – psycho

我想你要做的是[在這裏給出]（http://stackoverflow.com/questions/34379664/google-maps-api-setting-up-callbacks-for-adding-markers-polyline） – psycho

@psycho感謝您的建議，但我不明白這是如何回答我的問題。我的回調函數不接受參數。 – BlackSheep

您的webpack文件（map.bundle.js）通常不會將任何函數或變量寫入global（本例中爲window）名稱空間。

這會導致需要位於全局名稱空間（如jQuery或Google Maps API）中的庫出現問題。

一個辦法來解決這個問題是添加initMap window對象

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

來源

2017-02-16 00:45:51 redconservatory

webpack包中的導出函數

回答

相關問題