有没有办法逐步迁移到 Svelte？

Question

帮我松手刹:)

当后端生成 HTML 并使用 jQuery 和纯 JS 添加用户交互时，我有几个以经典方式构建的应用程序。现在我想迁移到 Svelte。

我计划将逻辑重写到组件中并将其作为自定义元素一个一个地添加，但我还没有找到通过外部样式对自定义元素进行样式化的方法。据我了解，此限制是由于使用了 Shadow DOM，因此样式不会泄漏到其他组件中。

好的，这是合理的，但有一种方法可以逐步迁移到 Svelte 而无需为每个组件提取，而是使用遗留构建中的外部样式？

Answer 1

您可以通过将组件导入您的旧学校布局来逐步迁移组件。为此，您需要开始将您的 javascript 迁移到模块样式中，否则您将无法导入。

# svelte/public/index.html
<head>
    <script type="module" src="old-school-js/main.js"></script>
    <!-- Svelte main.js -->
    <script type="module" src="js/main.js"></script>
</head>
<body>
<div id="chat"></div>
<div id="old-school"></div>
...

# Svelte main.js
import Chat from './Chat.svelte';
new Chat({
    target: document.querySelector('#chat'),
});

添加现有 CSS 可以通过使用 svelte-add 添加 SCSS 支持来重复使用，这样您就可以在组件中使用变量。

有没有办法逐步迁移到 Svelte？

Is there a way to gradually migrate to Svelte?

svelte