alpine README

The project's README from github.com/alpinejs/alpine. As one markdown file: README.md.

Alpine.js

Go to the Alpine docs for most things: Alpine Docs

You are welcome to submit updates to the docs by submitting a PR to this repo. Docs are located in the /packages/docs directory.

Stay here for contribution-related information.

Looking for V2 docs? here they are

Alpine Component Patterns

Contribution Guide:

Quickstart

Brief Tour

You can get everything installed with: npm install in the root directory of this repo after cloning it locally.

This repo is a "mono-repo" using npm workspaces for managing the packages. Each package has its own folder in the /packages directory.

Rather than having to run separate builds for each package, all package bundles are handled with the same command: npm run build

Here's a brief look at each package in this repo:

Package Description
alpinejs The main Alpine repo with all of Alpine's core
collapse A plugin for expanding and collapsing elements using smooth animations
csp A repo to provide a "CSP safe" build of Alpine
docs The Alpine documentation
focus A plugin that allows you to manage focus inside an element
history A plugin for binding data to query string parameters using the history API (name is likely to change)
intersect A plugin for triggering JS expressions based on elements intersecting with the viewport
mask A plugin for automatically formatting a text input field as a user types
morph A plugin for morphing HTML (like morphdom) inside the page intelligently
persist A plugin for persisting Alpine state across page loads

The compiled JS files (as a result of running npm run [build/watch]) to be included as a <script> tag for example are stored in each package's packages/[package]/dist directory.

Each package should at least have: a "cdn" build that is self-initializing and can be included using the src attribute in a <script defer> tag, and a module.[esm/cjs].js file that is used for importing as a JS module (cjs for node, esm for everything else).

The bundling for Alpine V3 is handled exclusively by ESBuild. All of the configuration for these builds is stored in the scripts/build.js file.

Testing

There are 2 different testing tools used in this repo: Cypress (for integration tests), and Vitest (for unit tests).

All tests are stored inside the /tests folder under /tests/cypress and /tests/vitest.

If you wish to only run Cypress and open it's user interface (recommended during development), you can run: npm run cypress

If you wish to only run Vitest tests, you can run npm run vitest like normal and target specific tests.

alpine (alpinejs/alpine)

Searching Database…

32K ·GitHub
Alpine
这是什么？Alpine.js 是一个小巧精简的框架，让你可以直接在 HTML 标记中以属性的形式添加交互式 JavaScript 行为，无需构建步骤，也无需组件系统。
这是像 Vue 或 React 那样的完整框架吗？它比它们轻量得多——你不需要编写独立的 JS 组件，而是直接在元素上以 HTML 属性的形式添加行为，这种思路类似于 Tailwind 通过类名来设置样式。
怎样把 Alpine 添加到网页中？在页面中通过 script 标签引入 alpinejs 包中编译好的 cdn.js 文件，它就会自动初始化；或者用 npm 安装，再以模块的形式导入。
我只是想在网站上用 Alpine，还需要 npm 或构建工具吗？不需要——正常使用时，只需引入 CDN 的 script 标签即可；只有当你克隆本仓库以参与贡献时，才需要 npm install 和构建步骤。
这个 README 会讲解如何在我的应用中实际使用 Alpine 吗？不太会——本仓库的 README 主要是一份贡献指南；真正的使用文档位于顶部链接的独立 Alpine Docs 网站上。
有没有适用于严格内容安全策略（CSP）环境的构建版本？有的，'csp' 包提供了符合 CSP 要求的 Alpine 构建版本，适用于禁止内联脚本和 eval 的网站。
Alpine 的代码库是如何组织的？它是一个 npm workspaces 单体仓库，核心代码和每个插件都分别位于 /packages 下的各自文件夹中，并通过 ESBuild 驱动的单个 'npm run build' 命令统一打包。
What are similar projects?svelte, hyperapp, angular.js, vue, solid, core, riot, dva
Which topics is it in?minimal, javascript-framework, declarative, reactive, vanilla-javascript, plugins, frontend-framework, state-management, lightweight, web-framework, monorepo, browser
Creator
alpinejs
Size
9.2 MB
Stars
32K
Updated
CommitOct 05Releasev3.17.4Sep 21
Age
6y
Commits · 90 Days