如何设计一个可在多个项目中使用的精巧组件？

如何解决如何设计一个可在多个项目中使用的精巧组件？

我正在使用svelte / typescript构建两个Web应用程序：

• 站点A，它是面向公众的站点，需要尽可能快且精益
• 站点B，这是管理UI，编辑者可以在其中更新站点A中显示的内容

我想在编辑器中（在站点B中）使用相同的“视图组件”（来自站点A），但是附加一些编辑器逻辑，以便构建无需复制代码的所见即所得体验。

我当然可以使站点A和站点B都成为同一个精简应用程序的一部分，但我不希望站点A的访问者加载站点B中使用的所有模块和代码。

我应该如何设计以避免代码重复，但仍要防止站点B的逻辑泄漏到站点A中？

解决方法

假设您有一个用于A和B的项目文件夹，然后将共享组件放入一个共享文件夹，该文件夹位于A和B的同级文件夹中。
当您将共享组件导入A时，只需为导入指定正确的路径，例如../shared/Comp.svelte。而且，当您构建项目时，bundle.js将仅包含所需的组件，而没有其他内容。

,

为此的最佳解决方案是创建一个design system：

设计系统是在明确的标准指导下的可重复使用组件的集合，这些组件可以组装在一起以构建任意数量的应用程序。

实现仅是创建一个npm包。首先，您将创建包含所有组件（Button，Card等）的设计系统存储库。然后，将它们全部导出到index.js文件中：

export { Button } from 'path/to/component/Button';
export { Card } from 'path/to/component/Card';
...

然后，将您的设计系统捆绑在一起，并创建一个npm软件包，该软件包将作为生成的index.js文件作为条目。

然后在另一个应用程序中，从此包中导入组件：

import { Button } from 'my-design-system';