开发者问题收集

使用代码分割创建 React Component UI 库

2019-07-23
849

我们正处于该项目的初始阶段,因此现在我们只是想弄清楚如何最好地开始。

我们想要创建一个 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 专家求助。谢谢。

1个回答

首先,我建议坚持使用编写良好且受支持的 create-react-app 和 TypeScript 支持 。这样可以省去很多初始配置。

然后,我鼓励您查看 Yarn Workspaces 和 Lerna 的组合。设置可能很棘手,但自动符号链接以及各个组件(包)相互依赖的能力使其成为一个强大的组合。

在开发周期和“游乐场”方面,Storybook 很难被击败。他们有一些 即将推出的精彩内容 与文档相关,将非常强大(并且视觉上令人愉悦)

如果您还有其他问题,请告诉我 - 这个话题目前是我最关心的,所以我的脑海里充满了想法。

Riaan Van Der Westhuizen
2019-08-22