Google Maps kann nicht auf Callback-Funktion zugreifen, wenn Webpack verwendet

Question

Ich verwende Webpack, um ein kleines Projekt mit Google Maps zu erstellen, und ich habe ein Problem mit Google erreichen die Callback-Funktion aufgrund der Art, wie Webpack das Skript erstellt. Die einzige Möglichkeit, Google dazu zu bringen, die Callback-Funktion zu erreichen, besteht darin, sie manuell in den globalen Bereich des Webpack-Builds zu verschieben. Ich habe mich gefragt, ob es sowieso möglich wäre, dass ich es anders schreiben könnte, so dass ich die gebündelte Datei nicht manuell ändern müsste.

Pre-build:

import {apiKey} from './apiKey'; 

document.addEventListener('DOMContentLoaded', function(){ 

let lang; 

if(document.querySelectorAll('#map').length > 0){ 
    if(document.querySelector('html').lang){ 
     lang = document.querySelector('html').lang; 
    } else { 
     lang = "en";  
    } 

    let js_file = document.createElement('script'); 
    js_file.type = "text/javascript"; 
    js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + apiKey + '&language=' + lang; 
    document.getElementsByTagName('head')[0].appendChild(js_file); 
}; 



}); 

    let map ; 

    function initMapCallback() { 
     map = new google.maps.Map(document.getElementById("map"), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 8 
     }); 
    ; 

Post-build:

/* 0 */ 
/***/ function(module, exports, __webpack_require__) { 

'use strict'; 

var _apiKey = __webpack_require__(1); 

var map = void 0; 

function initMapCallback() { 
    map = new google.maps.Map(document.getElementById("map"), { 
     center: { lat: -34.397, lng: 150.644 }, 
     zoom: 8 
    }); 
}; 

document.addEventListener('DOMContentLoaded', function() { 

    var lang = void 0; 

    if (document.querySelectorAll('#map').length > 0) { 
     if (document.querySelector('html').lang) { 
      lang = document.querySelector('html').lang; 
     } else { 
      lang = "en"; 
     } 

     var js_file = document.createElement('script'); 
     js_file.type = "text/javascript"; 
     js_file.src = 'https://maps.googleapis.com/maps/api/js?callback=initMapCallback&signed_in=true&key=' + _apiKey.apiKey + '&language=' + lang; 
     document.getElementsByTagName('head')[0].appendChild(js_file); 
    }; 
}); 

    /***/ }, 
    /* 1 */ 
/***/ function(module, exports) { 

'use strict'; 

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 
var apiKey = exports.apiKey = 'something'; 

/***/ } 
/******/ ]); 

Answer 1

Alle Code läuft außerhalb des globalen Gültigkeitsbereich, wenn Sie webpack verwenden, in einem IIFE. Wenn Sie etwas explizit bereitstellen möchten, können Sie es selbst an das Fenster anhängen.

einfach die folgenden nach dem Funktionsdefinition hinzufügen:

window.initMapCallback = initMapCallback; 

Oder tun es in einer Zeile:

window.initMapCallback = function initMapCallback() { /* ... */ }; 

Und das ist es!