Skip to main content

Svelte 新动态：2021年6月

朝着 SvelteKit 1.0 迈进，以及在语言工具中加强 TypeScript/Svelte 集成

Dani Sandoval

本月，我们看到了许多对 SvelteKit 及其文档的贡献。语言工具也获得了一些新功能，最值得注意的是在 JavaScript 或 TypeScript 文件中与 Svelte 文件的更深入集成。让我们来看看更新内容...

SvelteKit 的新特性

  • svelte.config.js 配置文件现在以 ESM 格式加载（使用 .js 而不是 .cjs）。
  • AMP 页面现在将使用渲染后的 CSS，而不是输出的 CSS
  • 在 TypeScript 模板中添加了 svelte-check（sveltejs/kit#1556）
  • 支持 https 密钥对 sveltejs/kit#1456
  • 现在将 Vite 与 SvelteKit 捆绑在一起并使用升级版本。如果你的 package.json 中有 Vite，请将其移除
  • 为二进制响应添加 Etags sveltejs/kit#1382
  • 将 $layout 重命名为 __layout，将 $error 重命名为 __error
  • 移除 getContext，改用 request.locals
  • 将 .svelte 输出目录重命名为 .svelte-kit。相应地更新你的 .gitignore
  • 配置中现在可以使用 trailingSlash: 'never' | 'always' | 'ignore'。这将使构建在需要为 index.html 页面添加尾部斜杠的静态托管提供商上运行的网站变得更容易，并为需要更复杂行为的用户提供了一个解决方案。

SvelteKit 的重要bug修复

  • adapter-netlify 获得了修复 sveltejs/kit#1467 和新的文档 https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify
  • 路由器不再拦截应用程序不拥有的 URL 的导航。这修复了当页面上有相同源但与应用程序不共享基本路径的 <a> 元素时的崩溃问题。
  • 现在由路由器处理仅哈希的更改，修复了在某些情况下浏览器在哈希更改之间的”后退”导航。

Svelte 和语言工具的新特性

  • Svelte 3.38.1 和 3.38.2 修复了一个导致重复元素的水合问题。如果你在项目中看到这个问题，请确保更新到最新版本！
  • 新的 TypeScript 插件提供了在 JavaScript 或 TypeScript 文件中与 Svelte 文件的更深入集成。这包括诊断、引用和变量重命名。它与 VS Code 扩展一起打包，但目前默认关闭。你可以通过这个设置启用它。我们鼓励你测试并提供反馈
  • 在最新版本的 svelte-check 中，你现在可以提供 tsconfig.json 或 jsconfig.json 的路径。例如：svelte-check --tsconfig "./tsconfig.json"。这确保诊断只在该配置中引用的文件上运行。它还会对 JavaScript 和/或 TypeScript 文件运行诊断，这消除了对非 Svelte 文件运行另一个检查（如 tsc --noEmit）的需求（svelte-check 版本 1.6.0）
  • VS Code 扩展和 svelte-check 获得了新的主要版本更新。以前，没有初始化器的属性（export let foo;）只有在用户同时使用 TypeScript 和激活 strict 模式时才需要。现在这种情况已经改变：使用 TypeScript 的人，以及在 JavaScript 文件中也使用 checkJs 的人，现在将始终将这些属性标记为必需（svelte-check 版本 2.0.0，扩展版本 105.0.0）

社区展示

应用和网站

  • vidu 是一个极简的网络分析收集器和仪表板
  • River Runner 是一个虚拟方式来跟随河流下游 - 使用 Mapbox 和 Svelte 构建。
  • JSDoc Type Generator 为有效的 JSON 生成 JSDoc 类型。
  • pagereview.io 是一个网站反馈工具，让你可以直接在被审查的网站上留下评论。
  • gamesroom.io 是一个内置视频聊天的在线棋盘游戏平台。
  • Greedy Goblin 是一个适用于老派 Runescape 玩家的食谱应用。
  • hashbrown.geopjr.dev 是一个受 GNOME-shell 启发的网页，用于了解、探索源代码并下载 Hashbrown GTK 应用（源代码链接）。

库、工具和组件

  • svelte-image-crop 是一个使用 Web API 的简单点击拖拽图像裁剪库。
  • svelte-datepicker 是用 Svelte 构建的轻量级和包容性日期选择器。
  • svelte-regex-router 是一个简单、轻量级的库，用于在 Svelte 应用程序中轻松处理路由。
  • Svelte Micro 是 Svelte 的轻量级和响应式单组件路由器。
  • svelte-entity-store 旨在为存储实体对象集合提供简单、通用的解决方案。
  • svelte-animation-store 是一个基于 Svelte 的 tweened store 的存储，让你可以暂停、继续、重置、重放、反转或调整补间的速度。

想要贡献组件吗？ 提交你自己的组件 到 Svelte Society 网站上的包列表。

下月再见！

我们是否遗漏了什么？加入我们的 Svelte Society、Reddit 和 Discord！