使用 Svelte 创建独立小部件：我的旅程和解决方案

在过去的几个月里 在过去的几个月里，我的任务是确定如何为我的全职工作编写和管理独立的小部件。虽然确保它们正常运行相对简单，但我很快意识到维护它们完全是一个不同的挑战

考虑到这一点，我在业余时间开始了一个业余项目并将其开源。这使我能够分享我的见解和策略，帮助我确保小部件的质量。

我最初是怎么做的？

由于我的小部件需要高水平的反应性，因此我严重依赖 Svelte 组件 API 并使用 Rollup 进行捆绑。 “这很简单直接，直到我遇到了以下问题：

• 我未使用的 CSS 不断增加，而且我也不确定是否只捆绑了所需组件的 CSS。

• 如果没有严格的输入，很难通过小部件处理 JavaScript。由于我不得不分享一些像 jwt 解码和身份验证这样的实用程序，它很快就变得一团糟。

我怎么改的呢？

我开始考虑如何建立一些默认值，更重要的是，集成一个类型系统。这导致了我的业余项目 svelte-standalone 的创建。

svelte-standalone 的目标是：

• 确保充分缩小 CSS 并在捆绑时删除未使用的 CSS。
• 确保选择的类型系统在我的所有应用程序上得到良好支持和重用。

注意：选择的类型系统是 TypeScript。

• 确保单元和集成测试。
• 确保我可以在汇总解析之前和之后直观地检查我的小部件。

我是如何实现这一切的？

在确保 TypeScript 与 Rollup 插件和 Svelte 预处理器的兼容性之后，我退后一步，将我的项目分解为关键步骤。基本上我有：

1. A .svelte.
2. 一个 embed.js 文件，负责启动 .svelte 文件的实例并将其添加到正文中。

从那时起，我注意到我的嵌入文件基本上是在我的所有小部件上复制的默认文件，并开始生成它们。因此，我能够使用 codegen 工具根据我的精简文件和我在整个应用程序中处理类型的愿望生成 3 个文件：

1. declaration.d.ts - 使我可以直接导入我的 svelte 组件并使用 SvelteComponent 类型包装它，因此我默认将我的 svelte 组件转为强类型。
2. types.ts - 使我可以根据declaration.d.ts 声明的 props 编写 defaultConfig。
3. embed.ts - 以标准方式为我的所有小部件启用我的组件的启动/停止！

瞧！这种方法解决了我的类型系统问题，并提高了我的小部件的可维护性。

我如何应对 CSS 挑战：

我面临的与 CSS 相关的主要挑战是：如何轻松地清除和缩小 CSS？如何编写既易于协作又易于集成到不同环境中的 CSS？

解决方案非常简单：只需使用 Tailwind CSS。

通过这种方法，我发现了以下好处：

• 不再有冲突的样式：使用 Tailwind 让我不再担心样式冲突。例如，在处理严重依赖 Bootstrap 的遗留应用程序时，我只需向我的小部件应用一个前缀和一个重要标志，冲突就解决了。

• 无缝集成：将我的小部件导入另一个 Tailwind 应用程序时，我可以轻松省略某些 Tailwind 指令以减小我的包大小。

• 轻松的清除和缩小：缩小变得简单，使用 Tailwind 的内置 PurgeCSS，我只需要为每个小部件正确配置内容标志即可。这确保了最终捆绑包中只包含必要的样式。

我如何解决测试问题？

我在确保对我的小部件进行全面测试方面面临挑战，包括单元测试、集成测试和可视化测试。

我的主要目标是在使用 Rollup 处理组件之前和之后可视化它们。为了实现这一目标，我采取了以下步骤：

• 严格类型故事书：我根据我的declaration.d.ts 和 types.ts 文件实现了严格类型故事书。这使得自动为我的每个小部件生成默认故事变得很方便。

• Vite 集成：我使用 Vite 在 Svelte 路由上加载捆绑的组件。基于我的 TypeScript 文件生成默认路由组件也很方便。

仅此而已！我衷心感谢一些反馈！另外，请查看 svelte-standalone。

无论您有疑问、建议还是疑虑，请随时与我联系！

以上是使用 Svelte 创建独立小部件：我的旅程和解决方案的详细内容。更多信息请关注PHP中文网其他相关文章！