如何设计一个可用于多个项目的纤细组件？答案

【问题标题】：How do I design a svelte component to be available in multiple projects?如何设计一个可用于多个项目的纤细组件？
【发布时间】：2020-12-22 00:18:47
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

最好的解决方案是创建一个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';

【讨论】：

好消息。在学习设计系统时，我发现了这篇文章。它解释了有关文件夹结构和 index.js 的更多信息：digitalocean.com/community/tutorials/…
我更喜欢直接访问 ts 文件，而不是在中间使用构建步骤，生成源映射和符号链接等。所以我会先从 grohjy 的回答开始，看看我能走多远:-)
@ChristerCarlsund 在您希望其他人参与您的项目之前就足够了；)
我相信你应该选择@johannchopin 的方式。制作 npm 包是一个非常简单的过程，你“必须”决定哪些组件可以发布。我相信您可以将已发布和正在进行的组件保存在同一个“共享”文件夹下，但每个组件都应该有自己的文件夹。现在您可以开发新组件，当它们准备好时，只需将它们移动到已发布的文件夹并更新您的包。该软件包使在不同项目中使用这些组件变得容易。你只需要‘npm install your_package’就可以使用你的共享组件了。

【解决方案2】：

假设您有 A 和 B 的单独项目文件夹，然后您将共享组件放置到 A 和 B 的同级文件夹中。
当您将共享组件导入 A 时，您只需为导入提供一个正确的路径，例如 ../shared/Comp.svelte。当你构建你的项目时，bundle.js 将只包含需要的组件，没有别的。

【讨论】：