如何将 Webpack 与 Google Maps API 一起使用？答案

【问题标题】：How to use Webpack with Google Maps API?如何将 Webpack 与 Google Maps API 一起使用？
【发布时间】：2017-03-27 07:35:57
【问题描述】：

我正在使用 Webpack + html-webpack-plugin 来构建我所有的静态文件。问题是，当我将它与 Google Maps API 一起使用时，它不起作用。

我有这个代码：

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 6
  });
  // the other code, irrelevant
}

还有一个 HTML 文件：

<!doctype html>
<html>
<head>
</head>
<body>
  <div id="map"></div>
  <script async="async" defer="defer"
      src="https://maps.googleapis.com/maps/api/js?key=<token here>&callback=initMap">
    </script>
   <script src="script.js"></script>
</body>
</html>

如果我只运行这个文件，一切正常。但是如果我运行它，webpack 它会抱怨'initMap 不是一个函数'。我查看了输出内部，似乎 initMap 被声明为不是全局函数，而是作为模块内的函数或类似的东西，所以也许这就是问题所在。

我应该如何将 Google Maps API 与 webpack 一起使用？我知道我可以将一些库与我的脚本捆绑在一起，例如反应，我应该这样做吗？这里应该采用什么方法？

UPD：这是我的 webpack.config.js：

/* eslint-disable */
const path = require('path')
const fs = require('fs')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const nodeModules = {}
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod
  })

const htmlMinifierObj = {
  collapseWhitespace: true,
  removeComments: true
}

module.exports = [
// the first object compiles backend, I didn't post it since it's unrelated
{
 name: 'clientside, output to ./public',
 entry: {
   script: [path.join(__dirname, 'clientside', 'script.js')]
 },
 output: {
   path: path.join(__dirname, 'public'),
   filename: '[name].js'
 },
 module: {
   loaders: [
     {
       test: /\.js$/,
       loader: 'babel',
       query: { presets:['es2015', 'stage-0'] }
     }
   ],
 },
 plugins: [
   //new webpack.optimize.UglifyJsPlugin({minimize: true}),
   new HtmlWebpackPlugin({
     template: 'clientside/index.html',
     inject: 'body',
     chunks: ['script'],
     minify: htmlMinifierObj
   })
 ],
}]

输出的 HTML 是（我已经从源文件中删除了 importing script.js，因为它是由 webpack 添加的，并关闭了最小化，只是为了便于阅读）：

<!doctype html>
<html>
<head>
</head>
<body>
  <a href="/login/facebook">Login</a>
  <div id="map"></div>
  <script async defer
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCGSgj5Ts10UdapzUnWlr34NS5cuoBj7Wg&callback=initMap">
    </script>
<script type="text/javascript" src="script.js"></script></body>
</html>

【问题讨论】：

谷歌地图 API 没有与 webpack “打包”，你应该保留作为外部源，如果失败是因为 script.js 没有打包，或者你没有使用新打包的 js。请向我们展示您的 webpack 配置和最终的 html 文件
@DanyelDarkcloud 更新了问题

标签： javascript google-maps webpack html-webpack-plugin

【解决方案1】：

在 script.js 中

在你的函数声明之后，将函数添加到全局范围，如下所示：

function initMap() {
    // Some stuff
}
window.initMap = initMap;

【讨论】：

我已经为此苦苦挣扎了两天......与 Zurb Foundation for Sites 一起运行 Webpack 并徒劳地想出一个想法。这救了我。
在将 JavaScript 代码从 vanilla JS 设置移植到 Webpack 架构后，您使我免于重写 JavaScript 代码。谢谢。
Typescript 用户：stackoverflow.com/questions/12709074/…