reactjs - 如何管理具有许多独立小部件的大型 React/Redux 项目

Question

我想要一个这样的项目结构:

./app/package.json
./app/src/index.js

./widget1/package.json
./widget1/src/index.js

./widget2/package.json
./widget2/src/index.js

./widget3/package.json
./widget3/src/index.js

正如您所猜测的，这个项目就像 NPM 小部件子项目的聚合，而 app src 文件夹是真正的应用程序，它使用不同的小部件子项目。

我希望小部件之间有清晰而严格的分离，因为我目前的经验告诉我，开发人员倾向于在小部件之间引入不需要的循环依赖关系，即使我告诉他们不要这样做。

实际上，所有这些小部件都将是 ReactJS 小部件，其中大多数具有 3 个常见的 JS 库:React、JQuery 和 Lodash。有些不需要这 3 个库，有些需要额外的库，如 Packery、react-slick 或react-date-picker 所有这些小部件还应该共享常见的测试库，例如 mocha。 他们绝对需要共享完全相同的通用库版本(因为显然我不希望在我的项目中使用不同版本的 React，也不希望增加我的包大小)。

例如， - widget1 可以是一个 DatePicker 小部件，它依赖于 React + Lodash + react-date-picker (npm lib，不是我的) - 应用程序项目可能依赖于 React + Redux + Normalizr + 所有小部件及其传递依赖项，例如 react-date-picker

所有小部件都将是 Presentational components并且不需要更多花哨的依赖项。有些只依赖于 React。有些可能有 Redux reducer ，但由于它是普通的旧 JS 代码，因此不需要依赖。

小部件的数量可能非常大，我不想在每次库更新时编辑 200 个 package.json 文件(但是我最终可以使用一些代码来处理这个问题)。

在 widget1/src 内部时，应禁止从 widget2 请求代码。如果一个小部件必须能够依赖于另一个小部件，则必须在客户端小部件的 package.json 中显式设置此依赖关系。

我应该能够使用 Webpack 进行构建并独立测试所有小部件。我还应该能够立即构建和测试整个项目，包括所有子项目，并拥有一个聚合的全局测试和代码覆盖率报告。

我不希望它给开发者带来糟糕的体验。 React 和 Webpack 允许热代码重新加载。如果我的浏览器中有真正的应用程序并且我修改了小部件的代码，我应该能够使用 react-hot-loader 实时看到更改，而不必运行 npm 命令或按 F5。

<小时/>

我寻找的是Java Maven的dependencyManagement系统的等价物，您通常在父POM中为所有子项目设置版本，并且版本以某种方式继承给所有子项目项目。所有子项目都无法看到彼此(除非添加显式依赖项)，但它们可以说它们依赖于父项目中声明的库。所有lib版本号都可以在父项目中设置。

<小时/>

使用 NPM 和 Webpack 可以做到这一点吗？

或者至少是接近它的东西？

谢谢

Answer 1

您可以将每个小部件放入其自己的 git 存储库中，并通过存储库 URL 使用 NPM 安装它们。只要每个小部件定义了它们在自己的 NPM 包中使用的库，当它们在主项目中使用时，NPM 就会为您处理所有依赖项。

根据您团队的规模，您还可以注册 NPM 的私有(private)软件包并将其托管在那里 https://www.npmjs.com/npm/private-packages