alpine

Alpine.js

大多数内容请访问 Alpine 文档：Alpine Docs

欢迎您通过向此存储库提交 PR 来提交文档更新。文档位于/packages/docs目录中。

请留在这里获取与贡献相关的信息。

正在寻找 V2 文档？他们在这里

贡献指南：

快速入门

• 在本地克隆此存储库
• 运行npm install和npm run build
• 从网页上的<script>标记中包含/packages/alpinejs/dist/cdn.js文件，就可以开始了！

短暂游览

您可以使用以下命令安装所有内容：本地克隆后，在该存储库的根目录中执行npm install 。

该存储库是一个使用 npm 工作区来管理包的“mono-repo”。每个包在/packages目录中都有自己的文件夹。

不必为每个包运行单独的构建，所有包捆绑都使用相同的命令进行处理： npm run build

以下是此存储库中每个包的简要介绍：

包裹	描述
阿尔卑斯山	主要的 Alpine 存储库，包含 Alpine 的所有核心
坍塌	使用平滑动画展开和折叠元素的插件
芯片封装	提供 Alpine 的“CSP 安全”构建的存储库
文档	Alpine 文档
重点	一个允许您管理元素内焦点的插件
历史	一个使用历史 API 将数据绑定到查询字符串参数的插件（名称可能会更改）
相交	一个基于与视口相交的元素触发JS表达式的插件
面具	一个用于在用户键入时自动格式化文本输入字段的插件
变形	一个用于智能地在页面内变形 HTML（如 morphdom）的插件
坚持	用于跨页面加载持久保留 Alpine 状态的插件

例如，编译后的 JS 文件（作为运行npm run [build/watch]的结果）作为<script>标记包含在每个包的packages/[package]/dist目录中。

每个包至少应该有：一个自初始化的“cdn”构建，可以使用<script defer>标记中的src属性包含在内，以及一个用于导入的module.[esm/cjs].js文件作为 JS 模块（cjs 代表节点，esm 代表其他所有内容）。

Alpine V3 的捆绑由 ESBuild 独家处理。这些构建的所有配置都存储在scripts/build.js文件中。

测试

此存储库中使用了 2 种不同的测试工具：Cypress（用于集成测试）和 Jest（用于单元测试）。

所有测试都存储在/tests/cypress和/tests/jest下的/tests文件夹内。

您可以使用以下命令从命令行运行它们： npm run test

如果您只想运行 cypress 并打开它的用户界面（建议在开发过程中），您可以运行： npm run cypress

如果您只想运行 Jest 测试，则可以像正常一样运行npm run jest并针对特定测试。您可以使用--指定命令行配置选项以转发到 jest 命令，如下所示： npm run jest -- --watch