2017-12-27 18 views
2

laravel 5.5 및 VueJs를 배우고 있습니다. 내 문제는 js 파일에서 일부 함수를 내보내고 html 본문에서 호출 할 수없는 두 번째 js 파일에서 가져 오는 것입니다. 예 :html에서 호출 할 때 가져온 자바 함수가 정의되지 않았습니다.

A.js

function funA(){ 
} 
export {funA}; 

B.js

import {funA} from './A.js'; 

이 시점에서 나는 내가 그것을 사용하지만 경우, 그것은 작동 B.js 내부의 기능 funA를 사용하는 경우 html 페이지는 funA가 정의되지 않았다고 말합니다. 예를 들어 어떤 도움을 주시면 감사하겠습니다

mix.scripts('resources/assets/js/libs/materialize.js', 'public/js/libs/materialize.js') 
    .js('resources/assets/js/A.js', 'public/js/js/A.js') 
    .js('resources/assets/js/B.js', 'public/js/B.js'); 

:

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <button onClick="funA()"></button> 
    <script src="{{asset('js/B.js')}}"></script> 
</body> 
</html> 

내 웹팩 구성은 다음과 같이한다. 미리 감사드립니다.

답변

3

여러분의 HTML은 funA이 전체 window 개체에 있기를 기대한다고 생각합니다. 새로운 JavaScript 모듈 시스템은 네임 스페이스 오염을 피하기 위해 전역 네임 스페이스에 아무 것도 추가하지 않습니다.

버튼에 어쨌든 사용하려면 아래 작업을 수행해야합니다.

window.funA = funA 

당신은 당신의 B.js에서이 작업을 수행 할 수 있습니다. Vue를 사용하고있는 것처럼 보이고 더 좋은 방법이 있습니다. 이 기능이 작동하는지 알려 주시고, Vue 코드를 공유하여 다른 사람이 올바른 방법으로 도움을 줄 수 있도록하십시오.

+0

정말 고마워요.'Vuejs'에는 다른 방법이 있습니다.하지만 A.js에는 시스템 전체에서 사용하는 많은 도우미 기능이 포함되어 있습니다. 'VueJs'와는 별개입니다. 다시 한번 감사드립니다. – Disturb