Skip to main content

Svelte 的新变化：2022 年 9 月

迁移到 SvelteKit 的新文件系统路由器

Dani Sandoval

还在为本月寻找活动吗？这是您最后的机会获取 Svelte 峰会斯德哥尔摩站的门票！9 月 8 日至 9 日加入我们 🎉

随着 SvelteKit 的文件系统路由器在上月初完成了重新设计的合并，这个月有很多内容值得探索 —— 从迁移脚本到一系列新的博客文章、视频和教程。

但新路由功能并不是 SvelteKit 唯一的新特性……

SvelteKit 有哪些新变化

  • Link 现在作为 HTTP 头支持，并与 Cloudflare 的自动 Early Hints 即开即用 (1.0.0-next.405, PR)
  • $env/static/* 现在是虚拟的，以防止将敏感值写入磁盘 (1.0.0-next.413, PR)
  • $app/stores 现在可以在浏览器的任何地方使用 (1.0.0-next.428, PR)
  • config.kit.env.dir 是一个新的配置选项，用于设置查找 .env 文件的目录 (1.0.0-next.430, PR)

重大变化：

  • 文件系统路由器和 load API 改进了路由管理的方式。在安装版本 @sveltejs/kit@1.0.0-next.406 或更高版本之前，请遵循此迁移指南 (PR, Issue)
  • event.session 已从 load 中删除，同时删除了 session 存储和 getSession。请改用 event.locals (1.0.0-next.415, PR)
  • 已移除命名布局，改用 (groups) (1.0.0-next.432, Docs, PR & Migration Instructions)
  • event.clientAddress 现在为 event.getClientAddress() (1.0.0-next.438, PR)
  • $app/env 已重命名为 $app/environment，以免与 $env/... 混淆 (1.0.0-next.445, PR)

完整更改列表请查看 kit 的更新日志。

语言工具的更新

  • TypeScript 对 SvelteKit 的 $types 导入解析得不太好，Svelte 语言工具的最新版本对此进行了改进 (105.21.0, #1592)

社区展示

使用 Svelte 构建的应用和网站

  • canno 是一个简单的交互式 3D 物理游戏，具有可调的重力、大炮力量和调试可视化功能 —— 使用 threlte 构建
  • straw.page 是一个极其简单的网站构建工具，可以直接通过手机创建独特的网站
  • Patra 允许您仅通过链接共享简短笔记。无需数据库，无需存储
  • promptoMANIA 是一个 AI 艺术社区，提供在线提示生成器
  • Album by Mood 让您可以根据心情聆听音乐
  • Daily Sumeiro 是一个测试您的数学和逻辑技能的日常游戏
  • Lofi and Games - 直接从浏览器玩轻松的休闲小游戏
  • Pitch Pipe 是一个数字音高管，带有频率分析仪和纯律间隔
  • classes.wtf 是一个用 Go 和 Svelte 编写的自定义分布式搜索引擎，可以比标准课程目录更快地搜索哈佛课程
  • Scrumpack 是一套帮助敏捷/敏捷团队进行仪式（如计划扑克和回顾）的工具

学习资源

来自 Svelte 团队的内容

学习新的 SvelteKit 路由

推荐观看

推荐阅读

库、工具和组件

  • @svelte-plugins/tooltips 是一种为 Svelte 设计的简单提示工具和组件
  • Lucia 是一个简单的身份验证库，用于连接 SvelteKit 应用和您的数据库
  • remix-router-svelte 是 React 路由 API 的 Svelte 实现（基于 @remix-run/router）
  • MKRT 是一个 CLI 工具，帮助您快速创建 SvelteKit 路由
  • Histoire 是一个显示故事应用程序的工具 - 展示特定用例组件的场景
  • sveltekit-flash-message 是一个传递临时数据到下个请求的 SvelteKit 库，通常来自端点
  • svelte-particles 是一个用于创建粒子的轻量级 TypeScript 库
  • svelte-claps 为您的 SvelteKit 应用添加拍手按钮（类似 Medium）
  • Neon Flicker 是一个用于制作赛博朋克风格闪烁文本的 Svelte 组件
  • ComboBox 是一个帮助用户从大量项目中选择的搜索输入框组件
  • @svelte-put 是一些用于项目的实用 Svelte 工具
  • vite-plugin-svelte-bridge 让您可以编写 Svelte 组件并在 React 和 Vue 中使用它们

UI 套件和入门模板

  • Svelte-spectre 是基于 spectre.css 的 UI 套件并由 Svelte 驱动
  • Skeleton 使用 Svelte + Tailwind 的强大功能帮助您构建快速响应的 Web UI
  • iconsax-svelte 将流行图标包引入 Svelte
  • laravel-vite-svelte-spa-template 是一个 Laravel 9、Vite、Svelte SPA、Tailwind CSS（含表单插件和比例插件）、Axios 和 TypeScript 的入门模板
  • neutralino-svelte-boilerplate-js 是 Neutralino 和 Svelte 的跨平台桌面应用模板
  • figma-plugin-svelte-vite 是用于创建 Figma 插件的模板，结合 Svelte、Vite 和 TypeScript
  • Urara 是一个强大又易用的 SvelteKit 博客入门模板
  • SvelteKit Commerce 是一个为高性能电子商务站点构建的全功能入门工具包，由 Vercel 提供

我们错过了什么吗？欢迎在 Reddit 或 Discord 上告诉我们！

下个月见！