跳至主要内容

Svelte 新闻：2021 年 11 月

超过 5000 颗星点亮展示案例

Dani Sandoval

随着 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 语言工具现在支持读取 VS Code CSS 设置的配置（#1219）。
  • vite-plugin-svelte 添加了一个新的 experimental.prebundleSvelteLibraries 选项，可以更快地加载具有许多组件（如图标库和 UI 框架）的 Svelte 库。可以在 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 聆听历史找到音乐中的隐藏播放列表。
  • 按年份浏览 Marvel Unlimited 是一个 SvelteKit 网站，用于查看特定年份在 Marvel Unlimited 上可用的问题。
  • Files，一个适用于 Windows 的现代文件浏览器，有一个使用 SvelteKit 重建的新网站。
  • lil-hash 是一款简单的 URL 缩短器，可以生成易于记忆和发音的缩短 URL。
  • PWA Haven 是一个小型、快速、简单的 PWA 集合，用于替换原生操作系统应用。
  • DottoBit 是一款内置 URL 共享的多色 16 位绘图程序。
  • 用于打印的 Former 快速文档 是一款发票生成器，具有精美的设计、国际语言功能和自动计算功能。
  • Helvetikon 是一个社区维护的瑞士德语词典。
  • Palitra App 是一个基于搜索的调色板生成器。

以 Svelte 为特色的播客

  • Svelte Radio 深入探讨了最近发布的 Svelte 峰会网站背后的技术以及其他一些有趣的内容！
  • PodRocket，LogRocket 的播客，与 Rich Harris 谈论 Svelte。
  • PodRocket 还深入探讨了 Nick Reese 的 Elder.js。
  • Web Rush 和 Rich Harris 讨论了 SPA 和 MPA 之间的区别，服务器渲染的作用，客户端水合是什么，以及开发 SPA 或 MPA 的现代工具现状。
  • devtools.fm 与 Rich Harris 讨论了开发引人入胜的数据可视化和构建未来的工具。

教育内容

库、工具和组件

  • 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 组件。还可以查看 适用于 Svelte 的 SWR，以便更轻松地进行重新获取。
  • sveltekit-adapter-browser-extension 是一个适用于 SvelteKit 的适配器，它可以将您的应用转换为跨平台浏览器扩展。

查看社区网站 sveltesociety.dev，了解更多来自整个 Svelte 生态系统的工具、模板、添加器和适配器。

想了解更多 Svelte 的精彩内容？加入我们，访问 Reddit 或 Discord！