55

0

Alpine.js

您的新的轻量级 JavaScript 框架。

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