我正在用svelte/typescript构建两个Web应用程序：
- 站点A作为面向公众的前端，需要尽可能快速和精简
- 站点B是管理UI，编辑人员可在其中更新站点A中显示的内容
我希望在编辑器（在站点B中）中使用相同的“视图组件”（来自站点A），但附加一些编辑器逻辑，以便在没有代码重复的情况下构建WYSIWYG体验。
当然，我可以让站点A和站点B成为同一个应用程序的一部分，但我不希望站点A的访问者加载站点B中使用的所有模块和代码。
我应该如何设计它，以避免代码重复，但仍然防止逻辑从站点B泄漏到站点A？
2条答案
按热度按时间8wigbo561#
最好的解决方案是创建一个design system：
一个设计系统是一组可重用组件的集合，由清晰的标准指导，这些组件可以组装在一起以构建任意数量的应用程序。
这个实现就是创建一个npm包，首先你要创建包含所有组件（
Button，Card，...）的设计系统存储库，然后你要将它们全部导出到一个index.js文件中：然后绑定您的设计系统并创建一个npm包，该包将生成的
index.js文件作为入口。然后在不同的应用程序中，从该软件包导入组件：
jei2mxaa2#
假设您有A和B的个别项目文件夹，然后您将共用元件放置在共用文件夹中，该文件夹是A和B的同级。
当你把共享组件导入到A中时，你只给予导入一个正确的路径，比如
../shared/Comp.svelte。当你构建你的项目时，bundle.js将只包含需要的组件，而不包含其他任何东西。