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