通过脚本模块引入AlpineJS失败，遇404及导出错误求助

你遇到的两个错误原因明确：

1. 404错误：浏览器ES模块导入必须指定完整文件后缀，./modules/alpine缺少.js后缀，导致找不到对应文件。
2. 导出错误：你从unpkg下载的默认脚本是UMD格式（兼容浏览器全局变量和CommonJS规范），并非ES模块，因此不存在default导出，直接用import Alpine from ...会触发语法错误。

解决方案 #

方案1：下载ES模块版本的AlpineJS

从unpkg获取专为ES模块设计的版本，将https://unpkg.com/alpinejs/dist/module.esm.js的内容保存到modules/alpine.js，然后修改导入代码：

<script type="module">
    import Alpine from './modules/alpine.js';
    Alpine.start();
</script>

<div x-data="{ test: 'hello world' }">
    <span x-text="test"></span>
</div>

方案2：直接通过CDN导入ES模块

无需本地下载，直接使用CDN地址导入ES模块：

<script type="module">
    import Alpine from 'https://unpkg.com/alpinejs/dist/module.esm.js';
    Alpine.start();
</script>

<div x-data="{ test: 'hello world' }">
    <span x-text="test"></span>
</div>

方案3：适配本地UMD版本（不推荐）

如果坚持使用已下载的UMD版本，可以通过动态导入并调用全局变量的方式：

<script type="module">
    await import('./modules/alpine.js');
    window.Alpine.start();
</script>

<div x-data="{ test: 'hello world' }">
    <span x-text="test"></span>
</div>

内容的提问来源于stack exchange，提问作者Simon Ferndriger