2017-11-23 4 views
0

현재 웹 애플리케이션을 개발 중이며 WebPack에 번들로 제공되도록 코드를 리팩토링하는 중입니다. 내 HTML에서HTML 파일에서 번들로 제공되는 javascript (webpack 사용)의 기능에 액세스합니다.

나는 클릭 할 때 sendMessage() 함수를 호출하는 버튼, 내 코드의 첫 번째 버전에서

<button type="button" class="btn btn-default" onclick="sendMessage(document.getElementById('claim').value)">Submit</button> 

가의 sendMessage() 기능이 나는 HTML에서 직접 가져온 .js 파일에 정의되어 있습니다 ,

<script src="my_js/newsArticleScript.js"></script>

및 SendMessage() 함수는 직접 어떤 클래스 또는 모듈 내부 아니라, 파일 선언하지만 다른 함수 D를 호출한다 같은 파일에 efined, 그래서 그것을 분리하고 싶지 않아요.

하지만 이제 WebPack에 번들됩니다.

const path = require('path') 
 

 
module.exports = { 
 
    entry: { 
 
    \t homepage: './src/homepageScript.js', 
 
    \t newspage: './src/newsArticleScript.js' 
 
    }, 
 
    output: { 
 
    filename: '[name].bundle.js', 
 
    path: path.resolve(__dirname, 'dist/my_js') 
 

 
    } 
 
}
내가 번들 버전을 가져올 HTML에 스크립트 가져 오기를 변경 : 여기 내 설정 파일합니다 ( homepageScript.js 다른 페이지입니다)입니다. 내가 버튼을 누를 때 그리고 지금, 나는 그것에 대해 읽은

[Error] ReferenceError: Can't find variable: sendMessage

오류를 얻을, 나는 웹팩은 전 세계적으로 기능을 노출하지 않습니다 것을 배웠다. 함수를 내보내려고했지만 동일한 오류가 계속 발생했습니다.

아무도 도와 줄 수 있습니까? 본질적으로 내가 필요로하는 것은 webpack을 구성하거나 JS에서 HTML로 액세스 할 수 있도록 JS를 변경하는 방법을 이해하는 것입니다.

나는 JS에 익숙하다. 그래서 내 앱이 설계된 방식이 최선이 아니므로 개선점에 대한 조언 (모듈을 사용해야 할 수도 있고, JS 기능을 클릭 할 때 더 나은 방법이있을 수도있다. 버튼)도 환영받을 것입니다. 고마워요 :)

답변

1

일반적으로 텍스트 기반 이벤트 처리기를 사용하는 것은 좋은 생각이 아닙니다. 즉, 변화의 양이 늘어남에 따라 몇 가지 옵션이 있습니다.

  1. texual onchange 핸들러가 작동하려면

    , sendMessage 글로벌 될 것이다. 따라서 가장 빠른 수정은 코드를 변경하여이를 수행하는 것입니다. 예를 들어 코드에서
    function sendMessage(arg){} 
    

    이있는 경우는 전역 변수로 노출 후에는 추가

    window.sendMessage = sendMessage; 
    

    을 추가 할 것입니다.

  2. 더 현대적인 접근 방식은 버튼에서 onchange을 제거하고 HTML에 ID가 레이블 된 버튼이 있어야합니다 (예 : id="some-button-id".

    는 그런 다음 JS 코드에서, 당신은

    var button = document.querySelector("#some-button-id"); 
    button.addEventListener("change", function(){ 
        sendMessage(document.getElementById('claim').value); 
    }); 
    

    대신 HTML의 속성에, JS 코드를 사용하여 change 핸들러 함수를 추가 할 수 있습니다.

+0

고마워요! 그냥 옵션 1을 시도하고 즉시 작업 :) 옵션 2 나중에 시도합니다. – jsantos