如何使用 NPM 导入 AlpineJS？

Question

应该如何使用 NPM 导入 AlpineJS？

AlpineJS 文档说：

从 npm：从 npm 安装包。

npm i alpinejs

将其包含在您的脚本中。

import 'alpinejs'

我将最后一行放入我的一个 JavaScript 文件中。然而什么也没发生。我想，也许我需要一个像 Grunt 这样的打包工具来让这个导入真正做点什么。我不知道客户应该如何知道'alpinejs' 指的是node_modules/alpinejes/dist 中的alpine.js。 Grunt 只是让行保持原样，而不是 AlpineJS 文件到我的输出目录。

我想要达到的目标：

• 在客户端使用AlpineJS，不依赖CDN
• 可能：将alpine.js 与其他脚本文件连接以减少服务器请求的数量

Answer 1

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

否则是的，您可以将 node_modules/alpinejs/dist/alpine.js 的 Alpine.js 文件与您的 JS 文件连接起来并使用它（此时您不需要 import 语句）

Answer 2

选项一

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

对我来说最好的选择

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