从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函数

回答

相关问题