lerna monorepo包结构

Question

我正在为一些uiReact 应用程序和通用库代码开发一个单一存储库。其中一个包是组件库。

packages
  app1
  app2
  common-ui
    alert
    button

我对整个 React/node 生态系统还很陌生。

我看过很多实际的 UI 库示例 - react-bootstrap, material-design-components-react 等

我似乎希望将公共 ui 库中的每个组件作为单个文件分发，以便在将它们导入消费应用程序时可以精心挑选。

react-bootsrap 通过使用 babel 来 build "lib" 来做到这一点。他们将 uild 放入浏览器可分发文件、commonjs 库和 ES 库中。

material-design-components-react 通过 lerna monorepo 使他们的组件库本身来做到这一点，每个组件都有自己的 package.json，我相信他们使用 webpack 来 bui每个组件单独。

所以我的第一个问题是，

我的 common-ui 文件夹中是否有像 material-design-components-react 这样的结构 - 一种 monorepo 中的 monorepo 可能吗？

或者我是否需要重组：

packages
  app1
  app2
  alert
  button

我的第二个问题是，

社区推荐哪种设计用于主要 monorepo 中的组件库？这一定是开发人员在拥有许多具有公共库的客户端应用程序时必须解决的常见结构。每个 common-ui 组件一个包似乎开销很大，但当然他们有脚本来帮忙。

Answer 1

Is a structure like material-design-components-react in my common-ui folder - kind of a monorepo within a monorepo possible?

是的，这是可能的。但请记住，您和那些图书馆的要求截然不同。您可以将您的 monorepo 视为在同一家公司开发的小项目，它们依赖于类似的第 3 方库，并且它们遵循相同的 linting、测试等。

Which design is recommended by the community for a component library within a major monorepo? This must be a common structure developers have to solve when they have many client apps with common libraries. A package per common-ui component seems like a lot of overhead, but of course they have scripts to help out.

具有 3 个包的第一个结构是最常见的方式开始您的repository/project。

对于您的情况，我不建议将您的 ux-library 分成单个文件。您的应用程序可能会使用您的大部分 ux-library，并且您可能不会像 material 或 bootstrap 那样拥有那么多的组件。此外，如果您在图书馆中达到了这一点，您可以稍后将它们分开。作为参考，您还可以查看 lodash 如何发布它们的每个函数。这与您的情况没有什么不同（假设您不会发布任何 fonts/images 等）。

lerna monorepo包结构

lerna monorepo package structure

reactjs

react-bootstrap

lerna

monorepo