Alpine.js

대부분의 내용은 Alpine 문서로 이동하세요. Alpine Docs

이 저장소에 PR을 제출하여 문서 업데이트를 제출하실 수 있습니다. 문서는 /packages/docs 디렉터리에 있습니다.

기부 관련 정보를 보려면 여기를 클릭하세요.

V2 문서를 찾고 계십니까? 여기 있어요

알파인 구성 요소 패턴

기여 가이드:

빠른 시작

이 저장소를 로컬로 복제
npm install 및 npm run build 실행
웹페이지의 <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 파일에 저장됩니다.