Svelte 的新功能：2021 年 11 月

超过 5000 颗星点亮展示区

Dani Sandoval Nov 1 2021

随着 SvelteKit 跃过了 80% 的完成标志，在 GitHub 上获得超过 5000 颗星，并且现在使用率已超过 Sapper，现在是试用它的绝佳时机！社区中的许多人已经开始使用，这使得本月的展示区非常丰富……

此外，不要错过 11 月 20 日的 Svelte 峰会——来自世界各地的嘉宾将参与其中。留意您所在地区的观影派对 👀

现在来看看有哪些新功能！

Svelte 和 SvelteKit 的新功能

svelte.dev 现在与 sveltesociety.dev 一样运行在 SvelteKit 上。svelte.dev 是一个相对复杂的网站，具有实时代码编辑、身份验证和基于 Markdown 的博客——这使它成为我们充分测试 SvelteKit 的一个好方法
新的编译器选项 enableSourcemap 提供了对 JS 和 CSS 源映射的编译器输出的更大控制权 (3.44.0)。借助此新功能，SvelteKit 和 Vite Svelte 插件现在可以正确处理 .svelte 模板中的环境变量（参见 sveltejs/kit#720 和 sveltejs/vite-plugin-svelte#201）
Svelte Language Tools 现在支持读取 VS Code CSS 设置的配置（#1219）
vite-plugin-svelte 添加了一个新选项 experimental.prebundleSvelteLibraries，在加载包含许多组件的 Svelte 库（例如图标库和 UI 框架）时，可显著提高速度。此选项可以在 svelte.config.js 的根目录中设置。请尝试并给我们反馈！
SvelteKit 仅会在客户端路由端点，除非标记为 rel="external"——减少了客户端 JS 的大小，并提高了未来重构路由时的便捷性（2656）
SvelteKit 不再支持 Node 12（2604）
SvelteKit 已从 Vite 2.6.0 升级到 Vite 2.6.12，修复了 Vite 损坏 Svelte 运行时的问题 (https://github.com/vitejs/vite/issues/4306)。同时包含了 SvelteKit 团队的两个修复，从而避免或更容易诊断出 SvelteKit 模板中的 Vite 问题（https://github.com/vitejs/vite/pull/5192 和 https://github.com/vitejs/vite/pull/5193）。Vite 2.7 当前已提供测试版，其中包括针对 SSR 的额外修复

要查看 Svelte 和 SvelteKit 的所有更新，请分别查看 Svelte 和 SvelteKit 更新日志。

社区展示

应用和网站

Tangent 是一款为 Mac 和 Windows 提供的简洁且功能强大的笔记应用
The Pudding 是一个数字出版平台，通过视觉化文章解读文化中的争议性观点——现已重构为 SvelteKit
Power Switcher 提供关于瑞士能源供应向更清洁来源迁移的互动式概览
Sublive 提供了一种全新方式，通过低延迟高质量的音频网络连接全球音乐人，共同创新音乐
Vibify 使用您的 Spotify 收听记录帮助发现隐藏播放列表
Browse Marvel Unlimited by Year 是一个 SvelteKit 网站，可以查看某一年 Marvel Unlimited 上的可用漫画
Files，一个现代的 Windows 文件浏览器，其新网站已使用 SvelteKit 重构
lil-hash 是一个简单的 URL 缩短器，生成易于记住和朗读的短链接
PWA Haven 是一个小型、快速、简单的 PWA 集合，用以替代原生操作系统应用
DottoBit 是一个具有内置 URL 分享的多色 16 位绘画程序
Former 快速文档生成器是一个支持国际语言和自动计算的发票生成器，带有精美的设计
Helvetikon 是一个为瑞士德语语言维护的社区词典
Palitra App 是一个基于搜索的配色方案生成器

Svelte 相关的播客

Svelte Radio 深入探讨了最近发布的 Svelte Summit 网站背后的技术以及许多有趣的话题！
PodRocket，LogRocket 的播客，与 Rich Harris 讨论 Svelte
PodRocket 也深入探讨了 Nick Reese 开发的 Elder.js
Web Rush 和 Rich Harris 一起讨论单页应用 (SPA) 和多页应用 (MPA) 之间的差异、服务器渲染的作用、客户端 hydration 是什么以及开发 SPA 或 MPA 的现代工具状态
devtools.fm 与 Rich Harris 一起讨论如何开发引人注目数据可视化以及构建未来的开发工具

教学内容

单页应用是否毁了 Web? Rich Harris 在今年的 Jamstack 大会上回答了这一引发争议的问题
Svelte vs SvelteKit - 两者有何不同？ LevelUpTuts 提供了一个快速指南，用于解释这两个项目之间的关系。您也可以通过 Scott Tolinski 的视频系列 “Weekly Svelte” 查看更多关于 Svelte 的精彩内容
WebJeda 的 SvelteKit Hooks 系列本月继续更新，第 3 部分讲解了 Cookie 会话身份验证
在 Svelte 应用中编写上下文感知的样式是一个关于如何编写能够动态适应其父元素的自包含组件的指南
SvelteKit 初学者指南以友好的角度来介绍 Svelte 和 SvelteKit，并构建一个简单的网络应用来展示虚拟用户的个人资料页
Svelte vs React：结束争论从历史的角度解析这一长久以来的争论
Svelte 快餐 | 用于模态框操作的自定义事件详细讲解了 Svelte 实用的自定义事件系统的一种可靠实现
Svelte 的无障碍警告不会告诉你的事情解释了 Svelte 的无障碍警告是如何工作的，以及为什么您不应该仅仅依赖它们来让您的应用具有无障碍性

库、工具和组件

svelte-adapter-azure-swa 是一个适用于 Svelte 应用的适配器，用于创建 Azure 静态 Web 应用，并使用 Azure 函数来动态处理服务器端渲染
Inlang 是一个现已支持 SvelteKit 的本地化和国际化工具包
svelte-translate-tools 抽取/生成/编译 Svelte 应用的翻译文件
@egjs/svelte-infinitegrid 允许您实现由不同尺寸的卡片元素组成的多种网格
svelte-reactive-css-preprocess 让您在组件状态改变时更方便地更新 CSS 变量值
Sveltegen 是一个用于简单快捷创建操作、组件和路由的 CLI 工具
svelte-advanced-multistep-form 有助于封装表单元素，将样式传递给被渲染的组件，同时以有序且优雅的方式呈现每个表单步骤
gQuery 是一个适用于 SvelteKit 的 GraphQL 分析器和缓存工具
date-picker-svelte 是一个供 Svelte 使用的日期和时间选择器
TwelveUI 是一个内置无障碍功能的 Svelte 组件库
svelte-outclick 是一个 Svelte 组件，可监听元素外的点击事件，并提供 outclick 事件
svelte-zero-api 允许您像客户端函数一样使用 SvelteKit API——支持 TypeScript
svelte-recaptcha-v2 是一个适用于 Svelte SPA、SSR 和 sveltekit 静态站点的 Google reCAPTCHA v2 实现
Svelte Body 允许您在路由中为 body 应用样式——旨在与 SvelteKit 和 Routify 一起使用
svelte-debug-console 是一个 Svelte SPA、SSR 和 sveltekit 静态站点的 debug.js 实现，允许您在浏览器中查看调试语句
SVEO 是一个声明 SvelteKit 页面元数据的无依赖方案
@svelte-drama/suspense 是一个实现 React 的 <Suspense> 核心理念的 Svelte 组件。同时查看 SWR for Svelte，使重新获取数据变得更加轻松
sveltekit-adapter-browser-extension 是一个适用于 SvelteKit 的适配器，将您的应用转变为跨平台的浏览器扩展

探索社区网站 sveltesociety.dev 以获取更多来自 Svelte 生态系统的工具、模板、扩展和适配器。

想要更多 Svelte 的精彩内容？加入我们的 Reddit 或 Discord！