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 repo中，并通过repo URL使用NPM安装它们。只要每个小部件定义了他们在自己的NPM包中使用的库，当它们在主项目中使用时，NPM将为您处理所有依赖项。

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

Answer 2

您可能想尝试https://github.com/n8tz/webpack-inherit，因为它满足了上面提到的许多需求

它允许：

在1个源代码树中继承多个npm软件包
管理模块继承（驱动器节点和webpack可以很好地解决它们）
将所有Webpack conf和配置文件放入共享的，可继承的和版本化的软件包中
等...

请注意，使用太多继承的软件包进行热重装可能会很慢。

替代方法是使用窗口小部件的预编译版本并外部化其部件。

还要考虑这是一个相当新的插件

如何管理包含许多独立小部件的大型React / Redux项目

2 个答案: