如何将Google Maps异步回调与淘汰赛和Webpack结合使用？

Question

Hi all. 大家好。 I'm trying to integrate google maps api with knockout and webpack. 我正在尝试将Google Maps API与剔除和Webpack集成在一起。 I've set my request for the google maps api directly in my html. 我已经直接在HTML中设置了对Google Maps API的请求。 The script includes a callback function that I want to execute once its finished loading. 该脚本包含一个回调函数，该函数一旦完成加载便要执行。 But when I run the server I get the error "initMap is not a function." 但是，当我运行服务器时，出现错误“ initMap不是函数”。 I think this is happening because the function is located in a bundle but I'm not sure. 我认为这种情况正在发生，因为该功能位于捆绑包中，但我不确定。 Does anybody know why this is happening? 有人知道为什么会这样吗？ Heres the js that I'm bundling: 这是我捆绑的js：

import ko from 'knockout';


function initMap() {
  console.log('hey')
}


var MyApp = () => {
}


ko.applyBindings(new MyApp())

Heres the html: 继承人的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>

Here's my webpack config file: 这是我的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']
            }
          },
        ]
    }
};

FYI I've tried putting the initMap funtion in MyApp variable as well as leaving as seen as a global function. 仅供参考，我尝试将initMap函数放入MyApp变量中，以及将其视为全局函数。 Neither option works. 这两个选项均无效。 Do you think I should request the script within the js file instead as a script in the html? 您认为我应该在js文件中请求脚本，而不是在html中请求脚本吗？ If so, what would be the best way to do this? 如果是这样，最好的方法是什么？

Answer 1

After days of scouring the internet I finally found the answer here: Calling webpacked code from outside (HTML script tag) 经过几天的搜寻，我终于在这里找到了答案：从外部调用Webpacked代码（HTML脚本标签）

The answer I used is actually the 3rd accepted answer. 我使用的答案实际上是第三个接受的答案。 It involves setting the function as a property of the window and exporting the function 它涉及将功能设置为窗口的属性并导出功能

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

Please, if this answer helps you, go to that site and upvote that answer so it becomes the accepted answer. 请，如果此答案对您有帮助，请转到该站点并对该答案进行投票，使其成为可接受的答案。

如何将Google Maps异步回调与淘汰赛和Webpack结合使用？

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-12-05 04:58:05

如何将Google Maps异步回调与淘汰赛和Webpack结合使用？

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-12-05 04:58:05

解决方案1
0 已采纳 2017-12-05 04:58:05