javascript - Export function in webpack bundle - Stack Overflow

admin管理员组

文章数量:1277322

I am using the google Maps API which requires a callback. How do I export a callback from a webpack bundle to use by an external script such as Google Maps API?

HTML (X-d out key):

<div id="hello"></div>
<script src="/js/map.bundle.js"></script>
<script async defer src=";callback=initMap"></script>

map.js:

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

I build the above map.js file into a webpack bundle called map.bundle.js.

Browser console error:

Yc message : "initMap is not a function" name : "InvalidValueError" stack : "Error↵ at new Yc (...

I also tried adding

module.exports = { initMap: initMap }

to map.js but that didn't help.

EDIT: Same question, but for using javascript functions from webpack bundles in form events:

HTML:

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

JS:

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

When the JS is packaged into a bundle, the "hello" is no longer printed on the console

I am using the google Maps API which requires a callback. How do I export a callback from a webpack bundle to use by an external script such as Google Maps API?

HTML (X-d out key):

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

map.js:

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

I build the above map.js file into a webpack bundle called map.bundle.js.

Browser console error:

Yc message : "initMap is not a function" name : "InvalidValueError" stack : "Error↵ at new Yc (https://maps.googleapis./ma...

I also tried adding

module.exports = { initMap: initMap }

to map.js but that didn't help.

EDIT: Same question, but for using javascript functions from webpack bundles in form events:

HTML:

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

JS:

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

When the JS is packaged into a bundle, the "hello" is no longer printed on the console

• javascript
• google-api
• webpack

Share Improve this question Follow edited Feb 13, 2017 at 20:31 Daniel Kats asked Feb 13, 2017 at 20:21 Daniel KatsDaniel Kats 5,5541515 gold badges7272 silver badges113113 bronze badges 7

• Exported module needs to be first require into a variable and you will get an exported object, then you can call your exported functions. var initMapDep = require('./js/map.bundle'); initMapDep.initMap(); – psycho Commented Feb 13, 2017 at 20:31
• I think what you are trying to do is given here – psycho Commented Feb 13, 2017 at 20:35
• @psycho Thanks for the suggestion but I don't see how that answers my question. My callback function does not accept a parameter. – Daniel Kats Commented Feb 13, 2017 at 21:34
• No problem. You don't have to pass a parameter if you don't need it. Rest is the same initMap as you needed to use as a callback. – psycho Commented Feb 14, 2017 at 4:35
• stackoverflow./questions/40575637/… – redconservatory Commented Feb 14, 2017 at 4:37

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 11

Your webpack file (map.bundle.js) does not generally write any of your functions or variables into the global (in this case, window) namespace.

This causes problems for libraries that need to be on the global namespace like jQuery or the google maps api.

One way to get around this is to add initMap to the window object

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

本文标签： javascriptExport function in webpack bundleStack Overflow