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

2023年10月23日 220次阅读

我希望有一个这样的项目结构：

./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可以这样做吗？

或者至少接近它的东西？

谢谢

最佳答案 您可以将每个小部件放在它自己的git repo中,并通过repo URL使用NPM安装它们.只要每个小部件定义了他们在自己的NPM包中使用的库,当它们在主项目中使用时,NPM将为您处理所有依赖项.

根据您团队的规模,您还可以注册NPM的私人套餐并在那里托管它们https://www.npmjs.com/npm/private-packages

点赞