webpackを使用しているときにGoogleマップがコールバック機能にアクセスできない

Question

webpackを使用して小さなプロジェクトを構築しています。私がコールバック関数に到達するためにgoogleを得ることができる唯一の方法は、手動でwebpackビルドのグローバルスコープに移動することです。とにかく別の方法で書き込むことができたら、バンドルされたファイルを手動で変更する必要がないかどうか疑問に思っていました。

プリビルド：

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 
     }); 
    ; 

ビルド後：あなたはWebPACKのを使用する場合

/* 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

あなたのすべてのコードは、生命維持に、グローバルスコープの外で実行されます。何かを明示的に利用可能にしたい場合は、それをウィンドウに直接添付することができます。

ちょうどあなたの関数定義の後に次の行を追加します。

window.initMapCallback = initMapCallback; 

または1つのラインでそれを行う：

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

そして、それはそれです！