Svelte 的新鲜事：2021 年 2 月

在即将到来的全年最短月份里，Svelte 的维护者和社区成员们在过去一个月中非常忙碌——从 svelte-loader、prettier-plugin-svelte、rollup-plugin-svelte 和 language-tools 的重大变更，到 Sapper 和 svelte-preprocess 的稳定推进。同时，许多开发者也忙于将 Svelte 集成到其他流行框架中。

编译器的新特性

• 来自 WAI-ARIA Graphics Module 的 Aria 角色现在被 Svelte 组件识别为有效的 Aria 角色 (3.31.1)
• 针对 React 常用属性 className 和 htmlFor 的编译器警告，现在更方便将 React 组件移植到 Svelte (3.31.1)

对编译器特性有建议或想要帮助实现新特性/修复 bug？可以查看 Svelte 的“triage: good first issue”标签。

language-tools 的新功能

• 用户禁用的自动导入建议不再出现在 VS Code 中 (103.0.0)
• 对变量重命名更加安全，支持为重命名变量智能添加前缀/后缀 (104.0.0)
• 针对 TypeScript 用户的语义（词法）高亮功能，让主题创建者在其主题中应用语义样式（如果支持）(104.0.0)
• 右键菜单中新增“提取组件”选项——无需打开命令窗口输入 “Svelte: Extract Component”，即可将组件从文件中提取出来 (104.0.0)
• VS Code 插件现在监听 JavaScript/TypeScript 文件的更改——不再需要保存文件即可检测到更改 (104.1.0)

完整变更列表请查看 language-tools 的 发布页面。

尝试 language-tools 的一个好方法是下载 VSCode 的 Svelte 扩展。此扩展使用 Svelte 语言服务器为 VS Code 提供 Svelte 组件的语法高亮和丰富的智能感知功能。也可以检查您的编辑器扩展源，看看是否有适合您 IDE 的 Svelte 插件，或者自己构建一个（例如 coc-svelte）！

Svelte 生态系统的重大改进

• svelte-loader 发布了 3.0.0 的主版本——支持 Webpack 5 和 Node 14、更好的热重载功能以及与 rollup-plugin-svelte 保持一致的新 compilerOptions。破坏性变更包括放弃对 Svelte 2 和 Node 8 的支持。更多信息请查看变更日志。
• rollup-plugin-svelte 已更新到 7.x 版本——支持相对文件名、更好地处理 sourcemap，以及一致的 compilerOptions。升级时请务必查看 变更日志。
• svelte-preprocess 本月发布了多个 4.6.x 版本，以改进 postcss 和 scss 的处理并修复 TypeScript 用户的 sourcemap 转换。更多信息请查看变更日志。
• Sapper 在滚动跟踪和处理编码查询参数方面有所改进。在不支持 ES 模块的浏览器中，动态导入现在也可以正常工作。这些来自 0.29.0 的改动以及分步迁移指南都可在 变更日志 中找到。
• prettier-plugin-svelte 发布了 2.0 版本。进行了彻底的重构，并重新实现了 HTML 格式化。输出现在更符合标准 Prettier 格式化 HTML 的方式。svelteBracketNewLine 和 options-scripts-markup-styles 的更好默认值应该更符合大多数用户的代码块排列方式。此外，现在支持 Prettier 的 htmlWhitespaceSensitivity 设置。更多信息请查看变更日志。

Svelte Society 网站的新变化包括一个新的 速查表，方便快速参考有用的代码模式，以及一些网站的小型视觉修复。想要帮助让 Svelte Society 网站更加完善？查看 GitHub 仓库 以开始贡献吧！

---

社区展示

应用与网站

• 德国官方疫苗接种仪表板，跟踪当前的 COVID 疫苗覆盖情况，并包括一些精美的数据可视化。
• 教育连接的新时代，Vodafone 站点展示了技术和 COVID-19 如何改变教育格局。
• sho.rest，一个可自托管的短网址服务。
• night.fm，一个赛博朋克风格的电台。

演示、库与组件

• Svelte Reactive Debugger，一种在 Firefox 开发工具中监视 Svelte 响应式语句的方法。
• svelte-actions，几个未来可能被包含在官方里的原型 Svelte 操作。查看 RFC 和 探讨高层策略。
• 这个 CSS 网格画廊 由 @joja（在 Svelte Discord）制作，基于用户鼠标位置的网格过渡效果。
• Patchcab，一个基于 Web Audio 的模块化 Eurorack 风格合成器。
• svelte-knob，一个用于速度计样式可视化的旋钮组件。
• descent-ripple，一个高度可定制的按钮 JavaScript 波纹动画。
• makeItSnow，一个由 @MrPoule（在 Svelte Discord）制作的 Svelte 动作，可为任意组件添加 ❄️雪花❄️ (演示)。
• svelte-video-player，一个可定制的 VideoPlayer 组件。
• svelte-readonly，一个仅提供只读接口的小型 store。

新的集成与起步项目

• svelte-derver-starter，一个用于构建基于 Svelte（前端）和 Derver（服务端）全栈应用的起步项目。
• eleventy-plugin-embed-svelte，轻松将 Svelte 组件嵌入 11ty 网站中。
• svelte-tailwind-extension-boilerplate，一个使用 Svelte（前端）、Tailwind CSS（样式）、Jest（测试）和 Rollup（构建系统）的 Chrome 扩展项目模板，可以用 JavaScript 或 TypeScript 构建。
• snowpack-ui，允许您从浏览器而不是终端运行和管理 Snowpack 项目。
• Svelte for Appwrite，介绍如何集成 Appwrite，一种自托管的 Firebase 替代品。GitHub 仓库。
• here-maps-svelte，让在 Svelte 应用中轻松使用 HERE 地图。
• p5-svelte，一种极其简单的方法，将 p5（一种创意编程/画图工具）引入项目。
• svelte-windicss-preprocess，一个 Svelte 预处理器，用于基于 windicss 编译 tailwindcss。
• MitzaCoder/svelte-boilerplate，一个包含 TypeScript、TailwindCSS 和支持 IE11（通过 Babel）及惰性加载模块配置的模板。

想与世界分享你的 Svelte 组件？提交你的组件 到 Svelte Society 网站的 包列表。

学习资源

• lihautan 的 Svelte Actions 播放列表，教你 Actions 是如何工作的，以及它们如何帮助解决开发 Svelte 应用时的常见问题。
• 一键生成开发 API 的个人网志，向你展示如何用 API 抓取，例如在 DEVto！
• 如何编写一个 VSCode 扩展 介绍了如何使用Svelte在VSCode中渲染自定义UI
• 这个关于 Plenti 的 YouTube 系列 详细讲解了新的静态网站生成器

下个月再见！

想将您的作品添加到展示区？想为Svelte做出贡献？快来访问 Svelte Society、Reddit 和 Discord 参与进来吧！