如何使用NPM导入AlpineJS？

Question

如何使用NPM导入AlpineJS？

AlpineJS文档如下：

通过npm安装：

npm i alpinejs

在脚本中引用它：

import 'alpinejs'

我将最后一行代码放在了一个JavaScript文件中，但是没有效果。我想到可能需要像 Grunt 这样的打包工具才能使这个导入实际发挥作用。否则客户端怎么知道“alpinejs”指的是 node_modules/alpinejes/dist 中的 alpine.js 文件呢？然而，Grunt 只是让这行代码原封不动地存在，没有将 AlpineJS 文件复制到我的输出目录。

我想要实现以下目标：

• 在客户端中使用 AlpineJS，而不依赖 CDN
• 如果可能的话，和其他脚本文件合并成一个文件以减少服务器请求次数

- kslstn

Answer 1

选项一

import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start();

最适合我的选择

import Alpine from 'alpinejs';
window.Alpine = Alpine;
queueMicrotask(() => {
    Alpine.start()
});

- sahed moral

---

阿尔派恩（Alpine）有关此内容的部分请参见: https://alpinejs.dev/essentials/installation - Atem18

@Atem18，对我来说不起作用。 - Roshan Jha

@RoshanJha 应该可以。请发布您的配置。 - Atem18

虽然它没有说明在哪里，是哪个文件？'bundle'是什么意思？例如，你把它放在布局中了吗？ - Oliver Dixon

Answer 2

你需要一个支持npm模块/导入的打包工具来处理你的JS文件（其中包括Alpine.js导入）。Webpack、rollup或parcel都可以完成这项工作。

否则，你可以将Alpine.js文件在node_modules/alpinejs/dist/alpine.js处与你的JS文件连接起来并使用它（在此情况下，你不需要import语句）。

- Hugo