使用代码拆分创建 React 组件 UI 库

Question

我们正处于这个项目的开始阶段，所以现在我们只是想弄清楚如何最好地开始。

我们想要创建一个 React 组件的 UI 库，我们想做的是创建这个库，以便您可以直接导入一个元素，这样：

// bad
import {Button} from '@mycompany/uilib'
// good
import Button from '@mycompany/uilib/Button'

这是个大问题。因此，我们正在寻找一些解决方案来开始 - 我们已经查看了 create-react-library 和 lerna 或 storybook 可能是更好的开始？

从业务和工程的角度来看，这就是我们正在寻找的东西。

• 我们都认为 Typescript 是正确的选择。
• 我们认为对于这种类型的项目，rollup 可能比 Webpack 更好，但我们并不完全确定。如果它增加了开发周转率并且更容易维护/配置，那么它可能值得一点开销。

但最大的问题是我不确定诸如“@material-ui/core/Button”之类的包是如何做到的。谷歌搜索并没有多大帮助，因此对 StackOverflow 大师的吸引力。谢谢。

Answer 1

首先，我建议坚持使用编写良好且受支持的create-react-app with TypeScript support。这样可以避免很多初始配置。

那么，我建议您看看Yarn Workspaces 和 Lerna 的组合。设置可能很棘手，但自动符号链接以及您的各个组件（包）相互依赖的能力使其成为一个强大的组合。

在开发周期和“游乐场”方面，Storybook 很难被击败。他们在文档周围有一些amazing stuff coming soon，这将非常强大（并且视觉上令人愉悦）

如果您还有其他问题，请告诉我 - 这个话题目前是我的头等大事，所以我的脑子里满是想法。