从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');
任何帮助,将不胜感激。先进的谢谢你。
答
我认为您的HTML期望funA
位于全局window
对象上。新的JavaScript模块系统不会向全局名称空间添加任何内容,以避免名称空间污染。
如果你只是想使用是反正按钮然后,做下面应该让你工作。
window.funA = funA
您可以在您的B.js
中执行此操作。虽然,我不会推荐这个,因为我看到你似乎在使用Vue,并且有更好的方法来实现它。让我知道如果这个工作,也可以尝试分享你的Vue代码,以便有人可以帮助你以正确的方式做到这一点。
谢谢你真的工作,我知道用'Vuejs'还有其他方法可以做到这一点,然而'A.js'包含了很多帮助函数,我在整个系统中使用,我需要它独立于'VueJs'。再次谢谢你。 – Disturb