从html中调用时未定义导入的Javascript函数

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在学习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代码，以便有人可以帮助你以正确的方式做到这一点。

以上是 从html中调用时未定义导入的Javascript函数 的全部内容， 来源链接： utcz.com/qa/265616.html

回到顶部