如何将 google 地图异步回调与 knockout 和 webpack 一起使用？

Question

大家好。我正在尝试将 google maps api 与 knockout 和 webpack 集成。我已经在 html 中直接设置了对 google 地图 api 的请求。该脚本包含一个回调函数，我想在加载完成后执行该回调函数。但是当我运行服务器出现错误 "initMap is not a function." 我认为这是因为该函数位于一个包中，但我不确定。有人知道为什么会这样吗？这是我捆绑的 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 中的脚本吗？如果是这样，最好的方法是什么？

Answer 1

经过几天的网上搜索，我终于在这里找到了答案：

我使用的答案实际上是第三个接受的答案。它涉及将函数设置为 window 的属性并导出函数

window.initMap = initMap
export function initMap() { function stuff }

如果此答案对您有帮助，请访问该网站并为该答案点赞，使其成为被接受的答案。

如何将 google 地图异步回调与 knockout 和 webpack 一起使用？

How do I use google maps async callback with knockout and webpack?

javascript

google-maps

asynccallback

knockout.js

webpack