2017-12-05 9 views
2

모두 안녕하세요. 나는 knockout 및 webpack와 Google지도 API를 통합하려고합니다. 내 HTML에 직접 Google지도 API에 대한 내 요청을 설정했습니다. 스크립트에는 완료된로드를 실행하기 위해 콜백 함수가 포함되어 있습니다. 하지만 서버를 실행할 때 "initMap은 함수가 아닙니다."라는 오류가 발생합니다. 함수가 번들에 위치했기 때문에 이런 일이 일어나고 있다고 생각하지만 확실하지 않습니다. 왜 이런 일이 일어나는 지 아는 사람이 있습니까? 내가 번들있어 을 heres JS :knockout 및 webpack에서 google maps 비동기 콜백을 사용하려면 어떻게해야합니까?

import ko from 'knockout'; 


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


var MyApp =() => { 
} 


ko.applyBindings(new MyApp()) 

는 Heres는 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> 

여기 내 웹팩 설정 파일입니다 :

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

는 참고로 나는 시도했다 MyApp 변수에 initMap 기능을 넣을뿐만 아니라 전역 함수로 남겨 둡니다. 어느 옵션도 작동하지 않습니다. js 파일 내에서 스크립트를 html의 스크립트로 대신 요청해야한다고 생각합니까? 그렇다면이 작업을 수행하는 가장 좋은 방법은 무엇입니까? 인터넷을 수색의 일 후

답변

0

나는 마침내 여기 해답을 발견 : 내가 사용 Calling webpacked code from outside (HTML script tag)

대답은 실제로 3 허용 대답이다. 그것은

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

는,이 대답은 당신이 도움이된다면, 해당 사이트로 이동이 허용 대답가되도록 그 대답을 upvote에하시기 바랍니다 기능을 윈도우의 속성으로 기능을 설정하고 수출 포함한다.