Svelte

强化控制力的 Web 应用程序。「Cybernetically enhanced web apps. 」

Github stars Tracking Chart

什么是 Svelte?

Svelte 是一种构建 web 应用程序的新方法。它是一个编译器,将您的声明性组件转换成高效的 JavaScript,并对 DOM 进行更新。

Svelte 网站上了解更多信息,或者去下 Discord chatroom

开发

拉请求是受鼓励的,总是受欢迎的。选择一个问题来帮助我们!

若要在本地安装和使用Svelte:

git clone https://github.com/sveltejs/svelte.git
cd svelte
npm install

不要使用 Yarn 安装依赖项,因为 package-lock.json 中有特定软件包版本用于构建和测试 Svelte。

许多测试取决于换行符保留为 。 在 Windows 上,您可以通过以下方式进行克隆以确保这一点:

git -c core.autocrlf=false clone https://github.com/sveltejs/svelte.git

要构建编译器以及包中包含的所有其他模块:

npm run build

要监视更改并不断重新构建包(如果您使用 npm link 来测试本地项目中的更改,则很有用):

npm run dev

编译器是用 TypeScript 编写的,但不要因此而放弃它——它基本上只是带有类型注释的 JavaScript。你很快就会学会的。如果你使用的是 Visual Studio 代码以外的编辑器,你可能需要安装一个插件来获得语法高亮和代码提示等。 。

运行测试

npm run test

要过滤测试,请使用 -g(即 --grep)。 例如,仅运行涉及 transitions(过渡)的测试:

npm run test -- -g transition

svelte.dev

包含所有文档的 https://svelte.dev 的源代码位于 site 目录中。该网站是用 Sapper 构建的。要在本地开发:

cd site
npm install && npm run update
npm run dev

许可

MIT


附录:

什么是 Svelte?(Svelte v2 版本,原文:https://v2.svelte.dev/guide

Svelte 是用于构建快速Web应用程序的工具。

它类似于 React、Angular、Vue 和 Ractive 等 JavaScript 框架,它们都有一个共同的目标,即简化构建灵活的交互用户界面。

但有一个关键的区别:Svelte 在构建时将应用程序转换为完美的 JavaScript,而不是在运行时解释应用程序代码。这意味着您不需要为框架的抽象付出性能代价,并且在应用程序第一次加载时也不需要付出代价。

您可以使用 Svelte 构建整个应用程序,也可以将其增量地添加到现有的代码库中。您还可以将组件作为在任何地方都可以工作的独立包交付,而不需要依赖于传统框架的开销。

了解Svelte组件

在 Svelte 中,应用程序由一个或多个组件组成。组件是一个可重用的自包含代码块,它封装了属于一起的标记、样式和行为。

像 Ractive 和 Vue 一样,Svelte 推广单文件组件的概念:组件只是一个 .html 文件。 这是一个简单的例子:

REPL App.html
<h1>Hello {name}!</h1>

Svelte 将其转换为一个 JavaScript 模块,您可以将其导入您的应用程序:

main.js
import App from './App.html';

const app = new App({
    target: document.querySelector('main'),
    data: { name: 'world' }
});

// change the data associated with the template
app.set({ name: 'everybody' });

// detach the component and clean everything up
app.destroy();

恭喜,您已经了解 Svelte API 的一半了!

(Second edition: vz revised at 2020.04.19)

Overview

Name With Ownersveltejs/svelte
Primary LanguageJavaScript
Program languageJavaScript (Language Count: 5)
PlatformLinux, Mac, Windows
License:MIT License
Release Count533
Last Release Namesvelte@5.0.0-next.110 (Posted on 2024-04-20 01:54:04)
First Release Namev0.0.2 (Posted on 2016-11-20 13:14:35)
Created At2016-11-20 18:13:05
Pushed At2024-04-21 15:15:55
Last Commit At
Stargazers Count76.4k
Watchers Count856
Fork Count3.9k
Commits Count8.4k
Has Issues Enabled
Issues Count6206
Issue Open Count751
Pull Requests Count3810
Pull Requests Open Count77
Pull Requests Close Count874
Has Wiki Enabled
Is Archived
Is Fork
Is Locked
Is Mirror
Is Private

What is Svelte?

Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.

Learn more at the Svelte website, or stop by the Discord chatroom.

Development

Pull requests are encouraged and always welcome. Pick an issue and help us out!

To install and work on Svelte locally:

git clone https://github.com/sveltejs/svelte.git
cd svelte
npm install

Many tests depend on newlines being preserved as <LF>. On Windows, you can ensure this by cloning with:

git -c core.autocrlf=false clone https://github.com/sveltejs/svelte.git

To build the compiler, and all the other modules included in the package:

npm run build

To watch for changes and continually rebuild the package (this is useful if you're using npm link to test out changes in a project locally):

npm run dev

The compiler is written in TypeScript, but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than Visual Studio Code you may need to install a plugin in order to get syntax highlighting and code hints etc.

Running Tests

npm run test

To filter tests, use -g (aka --grep). For example, to only run tests involving transitions:

npm run test -- -g transition

svelte.dev

The source code for https://svelte.dev, including all the documentation, lives in the site directory. The site is built with Sapper. To develop locally:

cd site
npm install && npm run update
npm run dev

License

MIT

To the top