我最近更新了一个相当复杂的网络应用程序。该应用具有 auth、stripe、i18n、dark/light 模式、pwa 等功能。总体而言，它有大约 30 个页面和组件，几乎没有第三方 npm 包。
我想指出在将应用程序迁移到 svelte 5 时我发现非常具有挑战性的事情。
自动迁移脚本锤
svelte 提供的自动迁移脚本可以在终端 npx sv migrate svelte-5 中使用这个“one-liner”命令为您完成这项工作（在完成所有必要的更新并安装之后：“@sveltejs/vite -plugin-svelte”：“^4.0.0”和“svelte”：“^5”）。但我并不推荐这种“锤子”的做法。
使用 ctrl + shift + p (windows/linux) / shift + command + p (mac) 逐个文件、逐个组件地进行操作，并使用“将组件迁移到 svelte” 5 vs code 命令面板中的语法命令改为。这样你就会有更多的控制权。
已弃用的 run() 惊喜
脚本无法创造奇迹。将反应式变量声明升级到 $state() 通常没问题。然而，脚本可能很难检测 $: 是否应该转换为 $driven()/$衍生.by(() => {}) 或 $effect(() => {})。
那么，你猜怎么着？使用自动迁移脚本，您最终可能会得到大量 run(() => {})。
例如，想象一个使用如下内容的简化示例：
... let notext = false; $: if (data.completedoc == 'nolangversion') { notext = true; } $: if (data.completedoc !== 'nolangversion') { notext = false; }...{#if notext} {data.userprefferedlang.notextwarning}{:else}...{/if}...
自动迁移脚本将为您提供：
import { run } from 'svelte/legacy';... let notext = $state(false); run(() => { if (data.completedoc == 'nolangversion') { notext = true; } }); run(() => { if (data.completedoc !== 'nolangversion') { notext = false; } });
有一个很好的小警告，run 函数已被弃用。
我猜更好的 svelte 5 代码是这样的：
... let notext = $derived.by(() => { if (data.completedoc == 'nolangversion') { return true; } if (data.completedoc !== 'nolangversion') { return false; } });...
或者如果你的代码并不复杂，即使是这样：
... let notext = $derived( data.completedoc == 'nolangversion' ? true : false ) ...
原因是脚本无法轻松地将代码转换为 $categories.by(() => {})，因此它想使用更脏的方法 $effect()。但 $effect() 仅在客户端运行，因此该脚本使用已弃用的 run 函数。
如果可以的话避免$效应
现在我们得到了最重要的结论。 $effect() 仅在客户端运行。因此，服务器上没有用于预渲染页面和 ssr 的 $effect()。
$effect() 不在服务器上运行！
svelte 5 文档中应该强调这一点。
看这两个例子：
let a = 1let b = 2$: c = a + b{c} // server responds with c == 3
let a = $state(1)let b = $state(2)let c = $state(0)$effect(() => { c = a + b}){c} // server responds with c == 0
它们不一样。这带来了很多挑战。客户端在安装页面时需要重新评估 c 变量。从服务器发送的页面和最终在客户端上进行 dom 渲染时的页面看起来会有所不同（ssr、seo、闪烁问题等）。
因此，请始终尝试使用 $衍生或 $衍生.by(() => {}) 而不是 $effect()。这会为你省去很多麻烦。
这与我们被劝阻不要在 sveltekit 和 ssr 中使用商店时的情况完全相同。
sveltekit 中的 $effect 与 onmount()
由于 svelte 5 到来期间给出的示例，您可能会想用 $effect() 替换 sveltekit 中的 onmount() 。由于已经提到的原因，我暂时不鼓励这样做。 onmount 仍然是核心 svelte 生命周期挂钩。
$bindable $props 惊喜
另一个令人惊喜的地方是 svelte 5 非常注意变量值的一致性。如果您将变量作为 prop 传递给组件，并稍后在组件中更改此变量，脚本将尝试使用 $bindable $prop 解决此不一致问题。应通知家长，以便您的应用程序状态保持一致。
看这个例子：
// parent svelte file import componentbinded from './componentbinded.svelte'; import componentwithderived from './componentwithderived.svelte'; let name = $state('john wick');name value in parent: {name}
自动迁移脚本将要求您使用具有绑定值的组件，以确保父级可以取回更新的值：
// componentbinded.svelte let { name = $bindable() } = $props(); name = name.touppercase()name value in component with binded value: {name}
但也许我们也可以使用更简单的方法，你猜对了，使用 $衍生():
// componentwithderived.svelte let { name } = $props(); let uppercasename = $derived(name.touppercase())name value in component with derived value: {uppercasename}
:global { } 块
我在迁移过程中发现的一个非常好的功能是我们现在可以使用 css :global 和 block。例如，如果您想在 @html 中设置 html 元素的样式，则使用 :global 进行样式设置是非常必要的。
所以代替这个：
... #blog :global(table) { width: 100%; } #blog :global(td) { text-align: left; } #blog :global(th) { font-weight: bolder; font-size: medium; text-align: center; }
你可以使用这个：
... #blog :global { table { width: 100%; } td { text-align: left; } th { font-weight: bolder; font-size: medium; text-align: center; }}
样式作为组件中的道具
在 svelte 4 中，如果您想提供 css 类作为组件的 prop，您可以使用 {$$props.class}:
// icons component export let name; export let width = '1.5em'; export let height = '1.5em'; export let focusable = false; let icons = { user: { svg: `` }, user_logged: { svg: `` } }; let displayicon = icons[name]; {@html displayicon.svg} ...
在 svelte 5 中你可以使用 class={classname}:
let { name, width = '1.5em', height = '1.5em', focusable = false, class: className = '' } = $props();let icons = { user: { svg: `` }, user_logged: { svg: `` } }; let displayIcon = icons[name]; {@html displayIcon.svg}...
灯塔性能可能下降
当我使用自动合并脚本时，我对应用程序的性能下降感到震惊。有了 svelte 4，我几乎获得了 100% 的成绩。直到我手动迁移并仔细考虑如何（主要是如果可能的话如何避免 $effect()）后，我的 lighthouse 分数才再次回到绿色。
最后的话
迁移到 svelte 5 的时间比我预期的要长。不过，我还没有将这个新版本投入生产。 svelte 5 的更新频率仍然相当高。
希望我的经验对其他人有用。
以上就是Svelte igration 的经验和注意事项的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1495497.html
微信扫一扫 
支付宝扫一扫 
