如何使用 NPM 导入 AlpineJS？

Question

AlpineJS 文档说：

From npm: Install the package from npm.

npm i alpinejs

Include it in your script.

import 'alpinejs'

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

我想达到的目标：

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

Answer 1

您需要一个支持 npm modules/imports 的打包器来处理您的 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()
});

如何使用 NPM 导入 AlpineJS？

How to import AlpineJS with NPM?

npm

gruntjs

alpine.js