web-dev-qa-db-ja.com

Google Maps APIでWebpackを使用する方法

私は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はグローバル関数としてではなく、モジュール内部の関数として宣言されているようです。おそらくそれが問題です。

WebpackでGoogle Maps APIを使用するにはどうすればよいですか？いくつかのライブラリーを自分のスクリプト（reactなど）にバンドルできることは知っていますが、同じようにすべきですか？ここでのアプローチは何ですか？

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は（webpackによって追加されたため、ソースファイルからscript.jsのインポートを削除し、読みやすくするために最小化をオフにしました）：

<!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>
javascriptgoogle-mapswebpackhtml-webpack-plugin
15
serge1peshcoff

Script.js内

関数宣言の後に、次のように関数をグローバルスコープに追加します。

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