2017-12-27 15 views
2

私はlaravel 5.5とVueJsを学んでいますが、私の問題はjsファイルからいくつかの関数をエクスポートし、例:インポートされたJavascript関数が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> 

マイWebPACKの構成は次のようなものです。進んでいただきありがとうございます。

答えて

3

あなたのHTMLは、funAがグローバルwindowオブジェクトにあると考えています。新しいJavaScriptモジュールシステムは、名前空間の汚染を避けるために、グローバル名前空間に何も追加しません。

ボタンで使用したいのであれば、以下を実行すると効果的です。

window.funA = funA 

B.jsでこれを行うことができます。しかし、あなたがVueを使っているように見えるので、私はこれをお勧めしませんし、もっと良い方法があります。これが機能しているかどうかを教えてください。また、Vueコードを共有してみてください。

+0

本当にありがたいことですが、私は 'Vuejs'には他の方法があると知っていますが、' A.js'には私がシステム全体で使っているたくさんのヘルパー関数が含まれています。 'VueJs'から独立しています。再びありがとう。 – Disturb

関連する問題