大家好。我正在尝试将 google maps api 与 knockout 和 webpack 集成。我直接在我的 html 中设置了对 google maps api 的请求。该脚本包含一个回调函数，我想在加载完成后执行该回调函数。但是当我运行服务器时，出现错误“initMap 不是一个函数”。我认为发生这种情况是因为该函数位于一个包中，但我不确定。有人知道为什么会这样吗？ 这是我捆绑的 js:
import ko from 'knockout';
function initMap() {
console.log('hey')
}
var MyApp = () => {
}
ko.applyBindings(new MyApp())
这是 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Neighborhood Map</title>
<link rel="stylesheet" type="text/css" href="./css/main.css"
</head>
<body>
<div id="map">
</div>
<script type="text/javascript" src="build/bundle.js"></script>
<script defer
src="http://maps.google.com/maps/api/js?key=[KEY]&v=3&callback=initMap">
</script>
</body>
</html>
这是我的 webpack 配置文件:
const path = require('path');
module.exports = {
devtool: 'sourcemap',
entry: './app.js',
output: {
path: path.resolve('build', ''),
filename: 'bundle.js'
},
module: {
noParse: /node_modules\/knockout\/build\/output\/*.js/,
loaders: [
{
test: /\.html$/, loader: 'html-loader'
},
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
]
}
};
仅供引用，我已经尝试将 initMap 函数放在 MyApp 变量中，并将其视为全局函数。这两个选项都不起作用。你认为我应该请求 js 文件中的脚本而不是 html 中的脚本吗？如果是这样，最好的方法是什么？
最佳答案
在网上搜索了几天后，我终于在这里找到了答案:Calling webpacked code from outside (HTML script tag)
我使用的答案实际上是第三个接受的答案。它涉及将函数设置为窗口的属性并导出函数
window.initMap = initMap
export function initMap() { function stuff }
如果此答案对您有帮助，请访问该网站并为该答案点赞，使其成为被接受的答案。
关于javascript - 如何将 google maps 异步回调与 knockout 和 webpack 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47645219/