2017-12-05 3 views
2

こんにちは。私はノックアウトとwebpackとGoogleマップのAPIを統合しようとしている。私は自分のhtmlでGoogleマップのapiのリクエストを直接設定しました。スクリプトには、完了したロードを一度実行するコールバック関数が含まれています。しかし、私がサーバーを起動すると、 "initMapは関数ではありません"というエラーが表示されます。私はこれが起こっていると思います。なぜなら、関数はバンドルに入っていますが、わかりません。誰がなぜこれが起こっているのか知っていますか? 私は同梱していますHERESにJS:ノックアウトとウェブパックでGoogleマップの非同期コールバックを使用するにはどうすればよいですか?

import ko from 'knockout'; 


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


var MyApp =() => { 
} 


ko.applyBindings(new MyApp()) 

は、相続人のhtml:FYI私が試した

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'] 
      } 
      }, 
     ] 
    } 
}; 

<!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の設定ファイルがありますmyApp変数にinitMap関数を置き、グローバル関数として見えるようにします。いずれのオプションも機能しません。代わりにjsファイル内のスクリプトをhtmlのスクリプトとして要求する必要があると思いますか?もしそうなら、これを行うための最良の方法は何でしょうか?

答えて

0

インターネットを精練の日の後、私は最終的にここに答えが見つかりました:私が使用Calling webpacked code from outside (HTML script tag)

答えは、実際に第三受け入れ答えです。それは

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

は、この答えはあなたを助けている場合、そのサイトにアクセスし、それが受け入れ答えになるようにその答えをupvoteしてください機能をウィンドウのプロパティとしての機能を設定し、エクスポートが含まれます。

関連する問題