如何通过Google Maps API使用Webpack？ [英] How to use Webpack with Google Maps API?
问题描述
我使用Webpack + html-webpack-plugin来构建我所有的静态文件。问题是，当我将它与Google Maps API一起使用时，它不起作用。
I am using Webpack + html-webpack-plugin to build all my static files. The thing is, when I am using it with Google Maps API, it's not working.
我有这样的代码：
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文件：
And a HTML file:
<!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不是作为全局函数声明的，而是作为模块内部的函数或类似的东西声明的，所以也许这就是问题。
If I run just this file, everything works fine. But if I run this with, webpack it complaints about 'initMap is not a function'. I've looked inside the output, and it seems like initMap is declared not as global function, but as a function inside a module or something like that, so maybe that's the issue.
我应该如何使用Google Maps API和webpack？我知道我可以将一些库与我的脚本捆绑在一起，比如反应，我应该这样做吗？这里应该是什么方法？
How should I use Google Maps API with webpack? I know that I can bundle some libs with my script, such as react, should I do the same? What should be the approach here?
UPD：这是我的webpack.config.js：
UPD: Here is my 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是（我已经删除了导入 script.js ，因为它是由webpack添加的，为了便于阅读，关闭了最小化）：
And the output HTML is (I've removed importing script.js from my source file, because it's added by webpack, and turned off the minimization, just for readability):
<!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>
推荐答案
在script.js中
In script.js
函数声明后，将函数添加到全局作用域中，如下所示：
After your function declaration, add the function to the global scope, like this:
function initMap() {
// Some stuff
}
window.initMap = initMap;
这篇关于如何通过Google Maps API使用Webpack？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
