如何设计可用于多个项目的 svelte 组件？
How do I design a svelte component to be available in multiple projects?
我正在 svelte/typescript 中构建两个 Web 应用程序：
- 站点 A 作为面向 public 的前线，需要尽可能快和精简
- 站点 B 是管理 UI 编辑者更新站点 A 中显示的内容的地方
我想在编辑器（站点 B 中）中使用相同的“视图组件”（来自站点 A），但要附加一些编辑器逻辑，以便在没有代码重复的情况下构建所见即所得的体验。
我当然可以让站点 A 和站点 B 成为同一个 svelte 应用程序的一部分，但我不希望站点 A 的访问者加载站点 B 中使用的所有模块和代码。
我应该如何设计它来避免代码重复，同时仍然防止站点 B 的逻辑泄漏到站点 A？
假设您有一个单独的项目文件夹 A 和 B，然后您将共享组件放入 shared-folder，它与 A 和 B 是同级的。
当您将共享组件导入到 A 时，您只需为导入提供一个正确的路径，例如 ../shared/Comp.svelte。当您构建项目时，bundle.js 将仅包含所需的组件。
最好的解决方案是创建一个 design system:
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
实现只不过是创建一个 npm 包。首先，您将创建包含所有组件（Button、Card、...）的 design-system 存储库。然后你将把它们全部导出到一个 index.js 文件中：
export { Button } from 'path/to/component/Button';
export { Card } from 'path/to/component/Card';
...
然后你捆绑你的 design-system 并创建一个 npm 包，作为生成的 index.js 文件作为入口。
然后在您的不同应用中从这个包中导入组件：
import { Button } from 'my-design-system';
我正在 svelte/typescript 中构建两个 Web 应用程序：
- 站点 A 作为面向 public 的前线，需要尽可能快和精简
- 站点 B 是管理 UI 编辑者更新站点 A 中显示的内容的地方
我想在编辑器（站点 B 中）中使用相同的“视图组件”（来自站点 A），但要附加一些编辑器逻辑，以便在没有代码重复的情况下构建所见即所得的体验。
我当然可以让站点 A 和站点 B 成为同一个 svelte 应用程序的一部分，但我不希望站点 A 的访问者加载站点 B 中使用的所有模块和代码。
我应该如何设计它来避免代码重复，同时仍然防止站点 B 的逻辑泄漏到站点 A？
假设您有一个单独的项目文件夹 A 和 B，然后您将共享组件放入 shared-folder，它与 A 和 B 是同级的。
当您将共享组件导入到 A 时，您只需为导入提供一个正确的路径，例如 ../shared/Comp.svelte。当您构建项目时，bundle.js 将仅包含所需的组件。
最好的解决方案是创建一个 design system:
A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.
实现只不过是创建一个 npm 包。首先，您将创建包含所有组件（Button、Card、...）的 design-system 存储库。然后你将把它们全部导出到一个 index.js 文件中：
export { Button } from 'path/to/component/Button';
export { Card } from 'path/to/component/Card';
...
然后你捆绑你的 design-system 并创建一个 npm 包，作为生成的 index.js 文件作为入口。
然后在您的不同应用中从这个包中导入组件：
import { Button } from 'my-design-system';