问NX库与故事簿和单独导出的组件

EN

我正在探索具有角度的Nx (这两者都是比较新的)，并试图找出如何生成这样一个组件库：

• 可以运行童话，而且
• 可以一次导入一个组件，而不是将整个模块/所有组件拖到需要单个组件的应用程序中。(以避免向我的包中添加不必要的代码/膨胀)。

理想的设置是这样的：

repo
 |--apps
    |--normal-app (can import just card or button, without pulling in both)
 |--libs
    |--ui (lists individually exportable components, and has a servable Storybook)
       |--.storybook
       |--card
       |--button

在介绍了如何创建共享组件库的一般Nx教程以及设置Nx故事书的指南之后，我为该库目录生成了一个UI库，并设置了一个故事簿示意图(如果这是正确的话)。

希望我的所有共享组件都在一个库中，并将Storybook设置为自动生成每个组件并为每个组件提供故事--但这样就能够单独地将组件从这个库中拉到其他应用程序中，而不必占用整个庞大的UI库。

我成功地构建了一个UI库和其中的两个组件。我成功地在那个库里建立了故事簿。然后，我从UI库中的UIModule文件(公共API)中导入了index.ts，并使用了模板中的两个组件之一。

但是，当我构建导入库的应用程序时，产品构建包含了两个组件，尽管我使用了一个组件。这是有道理的，因为我正在导入UiModule。然而，这是不理想的。

我希望创建一个安装程序，允许库中的组件与Storybook安装程序并置，可以单独导入。

有没有办法做到这一点，而不彻底改变NX设置？到目前为止，我已经探索了两种主要的选择。一是将所有组件分解到自己的UI库中，将它们全部导入到为Storybook设置的一个单独的应用程序中，然后将它们单独导入到一个主应用程序中。就像这样(尝试#1)：

repo
 |--apps
    |--storybook-app (imports all)
    |--other-app (imports just button)
 |--libs
    |--button
    |--card

不过，这并不理想，原因有几点：

• 它不对组件进行分组。
• 它涉及到更多的自由样板。
• 它不为每个组件自动生成故事。
• 它要求开发人员记住为每个组件添加一个故事到故事簿。

作为第二次尝试(#2)，我尝试将每个组件作为共享目录中的单独库生成：

repo
 |--apps
    |--storybook-app (imports all)
    |--other-app (imports just button)
 |--libs
    |--ui (just a directory; not a "project")
      |--button (module; has separate component dir beneath)
      |--card

这本身有一些缺点：

• 还是不能自动生成故事。
• 不清楚我的故事本应该在哪里。这是一个独立的应用程序，如上面的树状图？这似乎不符合常理。我试着把它放在ui目录中，但是因为这不是一个“项目”，所以当我尝试使用VSCode NX扩展时，我会得到一个VSCode。
• 我必须为每个UI组件生成lib和lib中的组件。这是额外的样板，额外的代码和额外的错误机会。
• 在我看来，故事簿不应该是一个应用程序，因为它可以正常服务，但有自己的服务命令。

我可以构建上面描述的一个版本(可能是#2)，但我怀疑对于一个看似常见的用例，有一些最佳实践。我的困惑似乎很大程度上源于角度依赖注入。(在React应用程序中，您只需导入一个组件，但在角度上，每个组件属于一个模块，具体而言，也需要注入该组件。拥有特定于组件的模块是一种糟糕的实践吗？)

有谁知道满足这些理想规格的惯用/最佳实践方法(有单独导出组件的共享故事书库，还是在NX中使用自动生成故事的拆分组件)？