Svelte igration 的经验和注意事项

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Svelte igration 的经验和注意事项》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

我最近更新了一个相当复杂的网络应用程序。该应用具有 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(() => {})。

例如，想象一个使用如下内容的简化示例：

<script>
...
   let notext = false;
   $: if (data.completedoc == 'nolangversion') {
      notext = true;
   }
   $: if (data.completedoc !== 'nolangversion') {
      notext = false;
   }
</script>

...
{#if notext}
   {data.userprefferedlang.notextwarning}
{:else}
...
{/if}
...

自动迁移脚本将为您提供：

<script>
    import { run } from 'svelte/legacy';
...
    let notext = $state(false);
    run(() => {
        if (data.completedoc == 'nolangversion') {
            notext = true;
        }
    });
    run(() => {
        if (data.completedoc !== 'nolangversion') {
            notext = false;
        }
    });
</script>

有一个很好的小警告，run 函数已被弃用。

我猜更好的 svelte 5 代码是这样的：

<script>
...
    let notext = $derived.by(() => {
        if (data.completedoc == 'nolangversion') {
            return  true;
        }
        if (data.completedoc !== 'nolangversion') {
            return false;
        }
    });
...
</script>

或者如果你的代码并不复杂，即使是这样：

<script>
...
    let notext = $derived(
        data.completedoc == 'nolangversion' 
        ? 
        true
        :
        false
        ) 
...
</script>

原因是脚本无法轻松地将代码转换为 $categories.by(() => {})，因此它想使用更脏的方法 $effect()。但 $effect() 仅在客户端运行，因此该脚本使用已弃用的 run 函数。

如果可以的话避免$效应

现在我们得到了最重要的结论。 $effect() 仅在客户端运行。因此，服务器上没有用于预渲染页面和 ssr 的 $effect()。

$effect() 不在服务器上运行！

svelte 5 文档中应该强调这一点。

看这两个例子：

<script>
let a = 1
let b = 2

$: c = a + b
</script>

{c}  // server responds with c == 3

<script>
let a = $state(1)
let b = $state(2)
let c = $state(0)

$effect(() => {
  c = a + b
})
</script>

{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
<script>
   import componentbinded from './componentbinded.svelte';
   import componentwithderived from './componentwithderived.svelte';
   let name = $state('john wick');
</script>

<p>name value in parent: {name}</p>

<componentbinded bind:name={name} />

<componentwithderived {name} />

自动迁移脚本将要求您使用具有绑定值的组件，以确保父级可以取回更新的值：

// componentbinded.svelte
<script>
   let { name = $bindable() } = $props();
   name = name.touppercase()
</script>

<p>
name value in component with binded value: {name}
</p>

但也许我们也可以使用更简单的方法，你猜对了，使用 $衍生():

// componentwithderived.svelte
<script>
   let { name } = $props();
   let uppercasename = $derived(name.touppercase())
</script>

<p>
name value in component with derived value: {uppercasename}
</p>

:global { } 块

我在迁移过程中发现的一个非常好的功能是我们现在可以使用 css :global 和 block。例如，如果您想在 @html 中设置 html 元素的样式，则使用 :global 进行样式设置是非常必要的。

所以代替这个：

...
<style>
    #blog :global(table) {
        width: 100%;
    }
    #blog :global(td) {
        text-align: left;
    }
    #blog :global(th) {
        font-weight: bolder;
        font-size: medium;
        text-align: center;
    }
</style>

你可以使用这个：

...
<style>
   #blog :global {
    table {
        width: 100%;
    }
    td {
        text-align: left;
    }
    th {
        font-weight: bolder;
        font-size: medium;
        text-align: center;
    }
}
</style>

样式作为组件中的道具

在 svelte 4 中，如果您想提供 css 类作为组件的 prop，您可以使用 {$$props.class}:

// icons component
<script>
   export let name;
   export let width = '1.5em';
   export let height = '1.5em';
   export let focusable = false;

   let icons = {
    user: {
    svg: `<path fill="none" d="m0 0h24v24h0v0z"/><path d="m12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2h6c.23-.72 3.31-2 6-2m0-12c9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    },
    user_logged: {
    svg: `<path fill="none" d="m0 0h24v24h0z"/><path d="m12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    }
   };

   let displayicon = icons[name];
</script>

<svg
    xmlns="http://www.w3.org/2000/svg"
    class={$$props.class}
    viewbox="0 0 24 24"
    fill="currentcolor"
    {focusable}
    {width}
    {height}
>
   {@html displayicon.svg}
</svg>

<style>
    ...
</style>

在 svelte 5 中你可以使用 class={classname}:

<script>
   let {
    name,
    width = '1.5em',
    height = '1.5em',
    focusable = false,
    class: className = ''
    } = $props();

let icons = {
    user: {
    svg: `<path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 6c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2m0 10c2.7 0 5.8 1.29 6 2H6c.23-.72 3.31-2 6-2m0-12C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 10c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    },
    user_logged: {
    svg: `<path fill="none" d="M0 0h24v24H0z"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>`
    }
   };

   let displayIcon = icons[name];
</script>

<svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor"
    class={className}
    {focusable}
    {width}
    {height}
>
    {@html displayIcon.svg}
</svg>

<style>
...
</style>

灯塔性能可能下降

当我使用自动合并脚本时，我对应用程序的性能下降感到震惊。有了 svelte 4，我几乎获得了 100% 的成绩。直到我手动迁移并仔细考虑如何（主要是如果可能的话如何避免 $effect()）后，我的 lighthouse 分数才再次回到绿色。

最后的话

迁移到 svelte 5 的时间比我预期的要长。不过，我还没有将这个新版本投入生产。 svelte 5 的更新频率仍然相当高。

希望我的经验对其他人有用。

本篇关于《Svelte igration 的经验和注意事项》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！