AlpineJS外部inquiry函数无法访问：Parcel打包后变量未找到

核心问题是模块作用域隔离：Parcel打包JS模块时，默认会把代码包裹在独立的模块作用域内，你导入的inquiry函数仅在index.js的局部作用域可用，并没有暴露到全局window对象上。而AlpineJS解析HTML里的x-data="inquiry()"时，是在全局作用域查找该函数，所以会抛出找不到变量的错误——但console.log(inquiry)能正常输出，因为它是在模块内部执行的，能访问到局部作用域的变量。

下面是两种可行的解决方案：

方案1：手动将inquiry挂载到全局window对象 #

修改你的index.js，把函数挂载到全局作用域：

import Alpine from 'alpinejs'
import { inquiry } from './path/to/your/inquiry-file.js'

// 将函数暴露到全局window
window.inquiry = inquiry

Alpine.start()

这样Alpine解析HTML时就能在全局找到inquiry函数。

方案2：用Alpine的全局组件注册（推荐） #

如果不想污染全局作用域，可以使用Alpine官方提供的全局注册方式：

import Alpine from 'alpinejs'
import { inquiry } from './path/to/your/inquiry-file.js'

// 注册为Alpine全局数据组件
Alpine.data('inquiry', inquiry)

Alpine.start()

同时修改HTML里的x-data绑定：

<div x-data="inquiry()">...</div>

这种方式更符合Alpine的最佳实践，不会额外污染全局作用域。

额外检查点 #

• 确保inquiry函数的导出正确：必须是export function inquiry() { ... }或export const inquiry = () => { ... }，保证能被index.js正确导入
• Parcel默认启用模块系统，无需额外修改打包配置

内容的提问来源于stack exchange，提问作者Miguel Moura