4

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

./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 小部件子项目的聚合，而 appsrc文件夹是真正的应用程序，它使用不同的小部件子项目。

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

在实践中，所有这些小部件都是 ReactJS 小部件，其中大多数都有 3 个常见的 JS 库：React、JQuery 和 Lodash。有些不需要这 3 个库，有些需要额外的库packery，例如. 他们绝对需要共享完全相同的通用库版本（因为显然我不希望在我的项目中使用不同版本的 React，也不希望增加我的包大小）。react-slickreact-date-pickermocha

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

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

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

在里面widget1/src时，应该禁止从widget2. 如果一个小部件必须能够依赖于另一个小部件，则必须在客户端小部件的 package.json 中明确设置此依赖关系。

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

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

我寻找的是相当于 Java Maven 的dependencyManagement系统，您通常在 parent 中为所有子项目设置版本POM，并且版本以某种方式继承给所有子项目。所有子项目都不能互相看到（除非添加了显式依赖项），但它们可以说它们依赖于父项目中声明的库。所有的 lib 版本号都可以在父项目中设置。

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

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

谢谢

4

2 回答 2

1

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

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

于 2016-01-28T10:20:41.227 回答
0

您可能想尝试https://github.com/n8tz/layer-pack，因为它满足提到的许多需求

它允许：

  • 在 1 个源代码树中继承多个 npm 包

  • 管理模块继承（驱动节点和 webpack 很好地解决它们）

  • 将所有 Webpack conf 和配置文件放在一个共享的、可继承的和版本控制的包中

  • ETC...

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

另一种方法是使用您的小部件的预编译版本并外部化他们的部门。

于 2019-01-28T12:53:18.930 回答