Typescript 如何设计一个可用于多个项目的轻巧组件？

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

• 站点A作为面向公众的前端，需要尽可能快速和精简
• 站点B，这是管理UI，编辑在其中更新站点A中显示的内容

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

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

---

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

假设您有一个单独的项目文件夹用于A和B，然后将共享组件放置到一个共享文件夹中，该文件夹与A和B是同级的。

---

将共享组件导入到时，只需为导入提供一个正确的路径，如

。/shared/Comp.svelte

。当您构建项目时，bundle.js将只包含所需的组件，而不包含任何其他内容。

假设您为A和B设置了单独的项目文件夹，然后将共享组件放置到共享文件夹中，该文件夹与A和B是同级的。

---

将共享组件导入到时，只需为导入提供一个正确的路径，如

。/shared/Comp.svelte

。当您构建项目时，bundle.js将只包含所需的组件，而不包含其他任何组件。

最好的解决方案是创建：

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

实现仅仅是创建一个npm包。首先，您将创建包含所有组件的设计系统repo（

按钮

，

卡

，…）。然后，您将在

index.js

文件中导出所有文件：

从'path/to/component/Button'导出{Button}；
将{Card}从'path/to/component/Card'导出；
...

然后绑定设计系统并创建一个npm包，作为生成的

index.js

文件作为条目

然后在不同的应用程序中，从该软件包导入组件：

从“我的设计系统”导入{Button}；

最好的解决方案是创建一个：

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

实现仅仅是创建一个npm包。首先，您将创建包含所有组件的设计系统repo（

按钮

，

卡

，…）。然后，您将在

index.js

文件中导出所有文件：

从'path/to/component/Button'导出{Button}；
将{Card}从'path/to/component/Card'导出；
...

然后绑定设计系统并创建一个npm包，作为生成的

index.js

文件作为条目

然后在不同的应用程序中，从该软件包导入组件：

从“我的设计系统”导入{Button}；

好消息。当我学习设计系统时，我发现了这篇文章。它解释了关于文件夹结构和index.js的更多信息：我更喜欢直接访问ts文件，而不是在两者之间使用构建步骤，生成sourcemaps和符号链接等等。所以我先从格罗吉的答案开始，看看这会让我走多远：-）@ChristerCarlsund这就足够了，直到你想让其他人参与你的项目；）我相信你应该走肖邦的路。制作npm包是一个非常简单的过程，这样您就“必须”决定哪些组件可以发布。我相信您可以在同一个“共享”文件夹下保存已发布和正在工作的组件，但每个组件都应该有自己的文件夹。现在您可以开发新组件，当它们准备好时，只需将它们移动到已发布的文件夹并更新您的软件包。该软件包使得在不同的项目中使用这些组件变得容易。您只需要“npm安装您的_软件包”，就可以使用您的共享组件了。很好的信息。当我学习设计系统时，我发现了这篇文章。它解释了关于文件夹结构和index.js的更多信息：我更喜欢直接访问ts文件，而不是在两者之间使用构建步骤，生成sourcemaps和符号链接等等。所以我先从格罗吉的答案开始，看看这会让我走多远：-）@ChristerCarlsund这就足够了，直到你想让其他人参与你的项目；）我相信你应该走肖邦的路。制作npm包是一个非常简单的过程，这样您就“必须”决定哪些组件可以发布。我相信您可以在同一个“共享”文件夹下保存已发布和正在工作的组件，但每个组件都应该有自己的文件夹。现在您可以开发新组件，当它们准备好时，只需将它们移动到已发布的文件夹并更新您的软件包。该软件包使得在不同的项目中使用这些组件变得容易。您只需要“npm安装您的_包”，就可以使用共享组件了。