Skip to main content

Svelte 更新：2022年8月

SvelteKit 的 load 在 1.0 前的变化，以及对 Vite 3 和 vite.config.js 的支持！

Dani Sandoval

这个月有很多内容需要介绍……在 SvelteKit 正式到达 1.0 之前，其设计将迎来重大变化。如果你还没有看到，可以查看 Rich 的讨论：修复 load 并在 1.0 之前优化 SvelteKit 的设计 #5748。

此外，Simon H (@dummdidumm) 已经加入 Vercel 全职从事 Svelte 的开发，同时 @tcc-sejohnson 也加入了 SvelteKit 维护者团队！我们非常高兴看到有新的维护者专注于 Svelte 和 SvelteKit 的开发工作，并已能感受到他们的贡献。七月是 SvelteKit 自诞生以来变更最多的第三个月！

接下来就是本月的更新内容...

SvelteKit 的新变化

  • 动态导入的样式现在在 SSR 期间包含在内（#5138）
  • 改善了路由和属性更新以防止不必要的重新渲染（#5654、#5671）
  • 错误处理得到了大量改进（#4665、#5622、#5619、#5616）
  • 自定义 Vite 模式现在在 SSR 构建中被支持（#5602）
  • 支持自定义 Vite 配置文件位置（#5705）
  • 私有环境变量（也称为“秘密”）现在更加安全。如果你不小心在客户端代码中导入它们，将会看到错误提示（#5663、文档）
  • 在 adapter-vercel 中，现在使用了 Vercel 的 v3 构建输出 API（#5514）
  • vite-plugin-svelte 已达到 1.0 版本，现在支持 Vite 3。你会注意到 dev（端口 5173）和 preview（端口 4173）的默认端口已更改（#5005、vite-plugin-svelte 更新日志）

破坏性变更：

  • $app/env 中不再可用 mode、prod 和 server（#5602）
  • svelte-kit CLI 命令现在需通过 vite 命令运行，并且需要存在 vite.config.js 文件。这将为 Vite 生态系统中的其他项目（如 Vitest 和 Storybook）提供一流的支持（#5332、文档）
  • endpointExtensions 现在改为 moduleExtensions，可用于过滤参数匹配器（#5085、文档）
  • SvelteKit 的最低 Node.js 版本为 16.9（#5395）
  • 现在允许 %-编码的文件名。如果你的路由中包含 %，现在必须将其编码为 %25（#5056）
  • Endpoint 方法名现在大写，以匹配 HTTP 规范（#5513、文档）
  • 为了与 Vite 的配置保持一致，writeStatic 已被移除（#5618）
  • transformPage 现在改为 transformPageChunk（#5657、文档）
  • package.json 中不再需要 prepare 脚本（#5760）
  • 在等待 compression 库中的一个 bug 修复 期间，adapter-node 暂时不再进行任何压缩操作（#5560）

完整的变更列表，请查看 SvelteKit 的 更新日志。

Svelte 和语言工具的新变化

  • Svelte 组件现在支持 @layer CSS at-rule（3.49.0，PR）
  • Svelte 的语言工具和插件现在支持 inert HTML 属性（105.20.0，PR）
  • 如果可用，Svelte 插件现在会使用 SvelteComponentTyped 类型定义（105.19.0，PR）

社区展示

使用 Svelte 构建的应用和网站

  • PocketBase 是一个开源的 Go 后端，包含一个文件和一个用 Svelte 构建的管理仪表盘
  • Hondo 是一个带多轮游戏的词语猜测游戏
  • Hexapipes 是一个用于玩六边形管道拼图游戏的网站
  • Mail Must Move 是一个适合想高效完成任务的人的邮件应用
  • Jot Down 是一个用于快速简单记笔记的 Visual Studio Code 扩展
  • Kadium 是一个帮助追踪自己订阅的 YouTube 频道上传的应用
  • Samen zjin we #1metS10 是一个支持 S10（荷兰 Eurovision 入围者）的活动网站，可通过发送绘画或祝愿参与
  • On Writing Code 是一个用于交互式学习编程设计模式的网站
  • Svelte-In-Motion 允许你在浏览器中创建 Svelte 动画视频
  • Svelte Terminal 是一个终端风格的网站
  • Bulletlist 是一个只有一个功能的简单工具：制作列表
  • Remind Me Again 是一个支持 Mac、Linux 和 Windows 开启/关闭提醒的应用
  • Heyweek 是一个为追求精致体验的自由职业者打造的时间记录应用

学习资源

来自 Svelte 团队的推荐

视频推荐

文章推荐

技术演示

库、工具和组件

我们漏掉了什么吗？在 Reddit 或 Discord 上告诉我们吧！

还在为九月找活动？快来加入我们在斯德哥尔摩举办的 Svelte 高峰会吧！立即购票。

我们下个月见！