问题描述
我正在使用svelte / typescript构建两个Web应用程序：
我想在编辑器中（在站点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';