Alpine.js
您的新的轻量级 JavaScript 框架。
浏览量
645
点击收藏
0
Alpine.js
访问 Alpine 文档了解大部分内容：Alpine Docs
欢迎您通过向此 repo 提交 PR 来提交对文档的更新。文档位于/packages/docs目录中。
留在这里以获取与贡献相关的信息。
寻找 V2 文档？他们来了
贡献指南：
快速开始
- 在本地克隆这个 repo
- 运行
npm install&npm run build - 在网页上包含标签中的
/packages/alpinejs/dist/cdn.js文件<script>，您就可以开始了！
简单浏览
npm install在本地克隆后，您可以在此 repo 的根目录中安装所有内容：
这个 repo 是一个“mono-repo”，使用 npm 工作空间来管理包。每个包在目录中都有自己的文件夹 /packages。
不必为每个包运行单独的构建，而是使用相同的命令处理所有包包：npm run build
以下是此 repo 中每个包的简要介绍：
| 包裹 | 描述 |
|---|---|
| alpinejs | 包含所有 Alpine 核心的主要 Alpine 存储库 |
| collapse | 使用平滑动画展开和折叠元素的插件 |
| csp | 提供 Alpine 的“CSP 安全”构建的 repo |
| docs | 高山文档 |
| focus | 一个允许您管理元素内部焦点的插件 |
| history | 使用历史 API 将数据绑定到查询字符串参数的插件（名称可能会更改） |
| intersect | 基于与视口相交的元素触发 JS 表达式的插件 |
| mask | 用于在用户键入时自动格式化文本输入字段的插件 |
| morph | 用于在页面内智能地变形 HTML（如 morphdom）的插件 |
| persist | 用于在页面加载时保持 Alpine 状态的插件 |
npm run [build/watch]例如，作为标签包含的已编译 JS 文件（作为运行的结果）<script>存储在每个包的 packages/[package]/dist目录中。
每个包至少应该有：一个自初始化的“cdn”构建，可以使用标签 src中的属性包含，以及一个用于作为 JS 模块导入的文件（cjs 用于节点，esm 用于其他所有内容） .<script defer>``module.[esm/cjs].js
Alpine V3 的捆绑由 ESBuild 专门处理。这些构建的所有配置都存储在 scripts/build.js文件中。
测试
此 repo 中使用了 2 种不同的测试工具：Cypress（用于集成测试）和 Jest（用于单元测试）。
所有测试都存储在 和 下的文件 /tests夹中。/tests/cypress``/tests/jest
您可以使用以下命令从命令行运行它们：npm run test
如果你只想运行 cypress 并打开它的用户界面（在开发过程中推荐），你可以运行：npm run cypress
如果您只想运行 Jest 测试，您可以 npm run jest像正常一样运行并针对特定测试。您可以指定命令行配置选项以转发到 jest 命令，--如下所示：npm run jest -- --watch