在另一个项目中使用一个 React 项目

Question

我想在另一个项目中使用一个 React 项目，但我想更好地解释自己。

1. 我有一个 React 项目，我想将更多其他 React 项目放在我的电脑上
2. 我不想将我的项目放在公共 npm 中

如何在更大的 React 项目中使用这些孤立的 React 项目？

Answer 1

有多种方法可以解决这个问题。

---

在其他 React 应用中拥有整个 React 应用

这通常被称为微前端。你甚至可以在另一个 React 应用程序中拥有多个 React 应用程序。甚至其他框架，例如 Vue 或 Angular。解决此问题的两种方法：

单个单页应用程序（单个 SPA）

在这种情况下，您可以在一个中构建多个应用程序。关于此的一篇不错的文章是：Building Micro Frontends with React。

将应用程序拆分为单独的 SPA

另一种选择是将应用程序拆分为单独的 SPA。因此，您将构建，然后部署在服务器上，将它们加载到您想要的页面上的应用程序中。来源：Hosting multiple react applications on the same document

---

仅重用组件

如果您想重用组件，您可以创建一个单独的应用程序，在其中使用storybook 来创建和维护您的组件。从这个项目你将它们分发到你的其他项目。

如果您将此项目与您的 react 项目保持在同一个根目录中，则可以使用相对导入来使用它们。

如果您不想在公共注册表中发布它，可以使用 私有 npm 注册表。

有两种方法可以解决这个问题。

1. 付费私人 npm 注册表：

   • https://www.npmjs.com/
   • https://www.myget.org
   • 等

2. 自己托管：

   • https://www.npmjs.com/package/sinopia
   • https://www.npmjs.com/package/verdaccio
   • 等

这将允许您不公开您的 npm 包。