Question

我正在学习laravel 5.5和VueJs，我的问题是当我从js文件导出一些函数并从第二个js文件导入它时，它无法从html体中调用。例如：

A.js

function funA(){
}
export {funA};

B.js

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

此时如果我在B.js中使用函数funA它可以工作，但是如果我在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');

任何帮助将不胜感激。先谢谢你。

Answer 1

我认为您的HTML希望funA位于全局window对象上。新的JavaScript模块系统不会向全局命名空间添加任何内容，以避免命名空间污染。

如果您只想在按钮上使用is，那么执行以下操作可以让您工作。

window.funA = funA

您可以在B.js中执行此操作。虽然，我不会推荐这个，因为我看到你似乎在使用Vue，并且有更好的方法来做到这一点。让我知道如果这样做，也尝试共享您的Vue代码，以便有人可以帮助您以正确的方式做到这一点。

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

1 个答案: