使用外部JS文件中的JS函数

Question

使用AlpineJS，我有以下HTML和JS:

<form x-data="inquiry()" x-on:submit.prevent="submit" method="post">
</form>
<script>
function inquiry() {
return {
data: { name: "" },
submit() {
// Do something
}
}
}
</script>

我将JSinquiry函数移到一个JS文件中，并使用Parcel进行构建。

因此，用作Parcel入口点的index.js文件是：

import './index.less'  
import inquiry from './inquiry.js' 
import alpine from 'alpinejs';
window.alpine = alpine;
alpine.start();
console.log("Hello");

我正在HTML页面中导入捆绑包，使用：

<script src="~/index.js" type="text/javascript" defer></script>

当我运行代码并尝试访问inquiry函数时，我得到了错误：

Alpine Expression Error: Can't find variable: inquiry

然而，我可以看到"；你好"在控制台中作为console.log("Hello")的结果

我错过了什么？

Answer 1

您可能需要使用模块。你能在script标记上设置这个属性吗？

<script src="~/index.js" type="module" defer></script>

还要确保您正确地从该文件导出查询。