通过（内联）脚本模块导入 AlpineJS

Question

因为我想向 Alpine JS 添加一些模块，所以我尝试按照 文档 中的描述通过脚本模块加载 Alpine。然而，不知何故，我一定是误解了什么或犯了一个错误，因为它不起作用。

备注：

1. 我下载了脚本并相应地保存在

   modules/alpine.js

2. 我使用 Visual Studio Code 并使用 Microsoft 的 Live Preview 扩展运行预览
3. 使用下面使用的导入路径我得到这个 404 错误：GET http://127.0.0.1:3000/modules/alpine net::ERR_ABORTED 404 (Not Found)
4. 当我将 AlpineJS 的导入路径更改为

   ./modules/alpine.js

   时，出现以下错误： Uncaught SyntaxError: The requested module './modules/alpine.js' does not provide an export named 'default'

<!-- <script src="//unpkg.com/alpinejs" defer></script> This would work -->
<script type="module"><!-- This does NOT work -->
    import Alpine from './modules/alpine';
    Alpine.start();
</script>

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

Answer 1

由于要将 Alpine.js 作为模块导入，因此必须从模块构建中导入，而不是从 CDN 构建中导入。

使用包管理器安装 Alpine.js：

npm install alpinejs

然后您可以将 Alpine.js 作为模块从

./node_modules

导入：

<script type="module">
    import Alpine from './node_modules/alpinejs/dist/module.esm'
    Alpine.start()
</script>

如果你愿意，你也可以将

module.esm

复制到不同的目录并删除

node_modules

.