跳至主要内容

Svelte 新闻：2021年2月

闪电般的集成和改进...

Dani Sandoval

随着一年中最短的月份即将到来，Svelte 的维护者和社区成员们在上个月都很忙碌——从 svelte-loader、prettier-plugin-svelte、rollup-plugin-svelte 和 language-tools 的重大变化，到 Sapper 和 svelte-preprocess 的稳定进展。同时，许多人一直在忙于将 Svelte 与其他流行框架集成。

新的编译器功能

  • 来自 WAI-ARIA 图形模块 的 Aria 角色现在被识别为 Svelte 组件中的有效 aria 角色 (**3.31.1**)
  • 现在，针对常见 React 属性 className 和 htmlFor 的编译器警告使 React 组件移植到 Svelte 变得更加容易 (**3.31.1**)

您是否有关于编译器功能的建议，或者想帮助实现新功能/错误修复？请查看 “triage: good first issue” Svelte 标签

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 版本 - 支持相对文件名、更好的源映射处理以及一致的 compilerOptions。升级时，请务必 查看更改日志 以了解重大更改
  • svelte-preprocess 本月迭代了一些 4.6.x 版本，以改进 postcss 和 scss 处理，并修复 TypeScript 用户的源映射转换。更改日志中提供了更多信息
  • 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 仓库 开始吧！

社区展示

应用程序和网站

演示、库和组件

新的集成和启动器

  • svelte-derver-starter 是一个用于烘焙全栈应用程序的启动器，客户端基于 Svelte，服务器端由 Derver 提供支持。
  • eleventy-plugin-embed-svelte 使将 Svelte 组件嵌入到 11ty 网站变得容易。
  • svelte-tailwind-extension-boilerplate 是一个良好的基础，用于使用 JavaScript 或 TypeScript 的 Chrome 扩展，Svelte 用于前端，Tailwind CSS 用于样式，Jest 用于测试，Rollup 作为构建系统。
  • snowpack-ui 允许您从浏览器而不是终端运行和管理 Snowpack 项目
  • Svelte for Appwrite 解释了如何与 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 网站上的 软件包列表。

学习资源

下个月见！

想要将您的作品添加到展示中吗？想为 Svelte 做贡献吗？请查看 Svelte Society、Reddit 和 Discord 以参与其中！