從html中調用時未定義導入的Javascript函數

我正在學習laravel 5.5和VueJs，我的問題是當我從js文件中導出一些函數並從第二個js文件中導入它時，無法從html正文中調用它。例如：從html中調用時未定義導入的Javascript函數

A.js

function funA(){ 
} 
export {funA};

B.js

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

在這一點上，如果我使用的功能funA它的工作B.js內，但是如果我用它在html頁面說funA沒有定義。例如：

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

我的WebPack配置是這樣的：

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');

任何幫助，將不勝感激。先進的謝謝你。

來源

2017-12-27 Disturb

我認爲您的HTML期望funA位於全局window對象上。新的JavaScript模塊系統不會向全局名稱空間添加任何內容，以避免名稱空間污染。

如果你只是想使用是反正按鈕然後，做下面應該讓你工作。

window.funA = funA

您可以在您的B.js中執行此操作。雖然，我不會推薦這個，因爲我看到你似乎在使用Vue，並且有更好的方法來實現它。讓我知道如果這個工作，也可以嘗試分享你的Vue代碼，以便有人可以幫助你以正確的方式做到這一點。

來源

2017-12-27 14:57:11 aks

謝謝你真的工作，我知道用'Vuejs'還有其他方法可以做到這一點，然而'A.js'包含了很多幫助函數，我在整個系統中使用，我需要它獨立於'VueJs'。再次謝謝你。 – Disturb

從html中調用時未定義導入的Javascript函數

回答

相關問題