Alpine.js

ほとんどのことについては、Alpine ドキュメントにアクセスしてください: Alpine Docs

このリポジトリに PR を送信して、ドキュメントの更新を送信してください。ドキュメントは/packages/docsディレクトリにあります。

貢献関連の情報については、ここをご覧ください。

V2 ドキュメントをお探しですか?ここにいます

アルパインコンポーネントパターン

貢献ガイド:

クイックスタート

このリポジトリをローカルにクローン作成します
npm installとnpm run build実行する
Web ページの<script>タグから/packages/alpinejs/dist/cdn.jsファイルをインクルードすれば準備完了です。

簡単なツアー

ローカルに複製した後、このリポジトリのルートディレクトリにnpm installすると、すべてをインストールできます。

このリポジトリは、パッケージの管理に npm ワークスペースを使用する「モノリポジトリ」です。各パッケージには、 /packagesディレクトリ内に独自のフォルダーがあります。

パッケージごとに個別のビルドを実行する必要はなく、すべてのパッケージバンドルが同じコマンドnpm run buildで処理されます。

このリポジトリの各パッケージの概要は次のとおりです。

パッケージ	説明
アルピネス	Alpine のすべてのコアが含まれるメインの Alpine リポジトリ
崩壊	スムーズなアニメーションを使用して要素を展開および折りたたむためのプラグイン
csp	Alpine の「CSP セーフ」ビルドを提供するリポジトリ
ドキュメント	アルパインのドキュメント
集中	要素内のフォーカスを管理できるプラグイン
歴史	履歴 API を使用してデータをクエリ文字列パラメーターにバインドするためのプラグイン (名前は変更される可能性があります)
交差する	ビューポートと交差する要素に基づいて JS 式をトリガーするプラグイン
マスク	ユーザーの入力時にテキスト入力フィールドを自動的にフォーマットするプラグイン
モーフ	ページ内の HTML (morphdom など) をインテリジェントにモーフィングするためのプラグイン
持続する	ページの読み込み全体にわたって Alpine 状態を保持するためのプラグイン

たとえば、 <script>タグとして組み込まれるコンパイル済み JS ファイル ( npm run [build/watch]の実行結果) は、各パッケージのpackages/[package]/distディレクトリに保存されます。

各パッケージには少なくとも、自己初期化され、 <script defer>タグのsrc属性を使用して含めることができる「cdn」ビルドと、インポートに使用されるmodule.[esm/cjs].jsファイルが必要です。 JS モジュールとして (ノードには cjs、その他すべてには esm)。

Alpine V3 のバンドルは ESBuild によって独占的に処理されます。これらのビルドの構成はすべてscripts/build.jsファイルに保存されます。