React组件库实践：React + Typescript + Less + Rollup + Storybook

背景

原先在做低代码平台的时候，刚好有搭载React组件库的需求，所以就搞了一套通用的React组件库模版。目前通过这套模板也搭建过好几个组件库。

为了让这个模板更干净和通用，我把所有和低代码相关的代码都剔除了，只保留最纯粹的react组件库所需要的代码，并且同步到了github：react-standard-components。

技术栈

技术栈：React + Typescript + Less + Rollup + Storybook

组件库用Rollup.js构建，目前支持2种format：umd、esm。目前主要的使用方式还是CDN和es module，所以就没构建cjs格式的bundle。

样式用style inject方式处理，所以不存在单独的css产物。引入组件时也不需要额外引入.css文件，直接引入组件bundle即可。

支持alias，我发现很多react组件库相关的文章或者仓库，其所提供的相关配置都不支持alias，但个人感觉alias是能提升开发体验的，所以特别提一下。

默认别名有："@/*": ["src/*"]，可自行修改。需要注意的是Storybook有自己的配置在.storybook/main.js，如果要改的话，这里storybook的webpack配置也需要改。

介绍

Rollup

Rollup.js 是一个 JavaScript 模块打包器，可以将多个模块打包成单个文件，以便于在浏览器中使用。与其他打包器相比，Rollup.js 的独特之处在于它支持 ES6 模块语法，并能将其转换成适用于浏览器的代码，同时还可进行 tree shaking，即只打包使用到的代码，不打包未使用的代码，从而减小打包后文件的体积。

Rollup.js 的另一大优势是支持插件机制，可以通过插件扩展其功能。例如，可以使用插件将 CSS 文件打包进 JavaScript 文件中，或者使用插件将 TypeScript 转换成 JavaScript。

Rollup.js 的使用也非常简单。首先，需要在项目中安装 Rollup.js，并创建一个配置文件，指定入口文件和输出文件的路径，以及需要使用的插件。然后，在命令行中执行打包命令，即可生成打包后的文件。

Rollup.js 是一个功能强大、易于使用的 JavaScript 模块打包器，适用于各种规模的项目，可以帮助开发者提高代码的性能和可维护性。

Typescript

TypeScript是一种开源的编程语言，它是JavaScript的一个超集，由Microsoft开发和维护。它添加了静态类型检查和其他语言特性，以提高JavaScript代码的可读性、可维护性和可扩展性。

与JavaScript相比，TypeScript提供了更好的类型支持，这意味着开发人员可以在编码时发现并解决类型相关的错误。此外，TypeScript还支持类、接口、泛型、命名空间等常见的面向对象编程特性，这些特性可以使代码更加模块化和可重用。

TypeScript还具有一些高级功能，例如枚举、元组、交叉类型、联合类型等，这些功能可以在编写大型应用程序时提高代码的可读性和可维护性。

TypeScript可以使用任何现代的JavaScript库和框架，因为它是JavaScript的超集，可以编译成纯JavaScript并在任何支持JavaScript的浏览器或运行时环境中运行。

TypeScript是一种功能强大、可扩展的编程语言，它提供了更好的类型支持和面向对象编程特性，可以帮助开发人员编写更可读、可维护和可扩展的JavaScript代码。

Less

Less是一种基于CSS的预处理器，它可以帮助开发人员更加高效地编写CSS代码。Less使用一种类似于CSS的语法，同时增加了一些额外的特性，如嵌套规则、变量、混合等，使得CSS的编写更加简洁、易读、易维护。通过使用Less，开发人员可以更加灵活地组织和管理CSS代码，同时也可以提高开发效率。

Less可以通过两种方式使用：一种是将Less编译为CSS，然后在网页中引入CSS文件；另一种是在网页中直接引入Less，然后通过JavaScript动态地生成CSS代码。这两种方式都有各自的优缺点，开发人员可以根据自己的需求和习惯进行选择。

Less还有一些其他的特性，如函数、运算符、条件语句等，这些特性可以让开发人员更加灵活地处理CSS代码。同时，Less还支持插件机制，可以通过插件来扩展Less的功能。

Storybook

Storybook 是一个为 React、Vue、Angular 等各种前端框架提供 UI 组件开发环境的工具，可以帮助开发者以独立的方式开发、测试和展示 UI 组件，提高开发效率和可复用性。

Storybook 的主要功能是将 UI 组件与其不同状态下的展示效果以故事（Story）的形式呈现出来，方便开发者进行交互式开发和调试。开发者可以在 Storybook 中创建不同的故事，每个故事对应一个特定的组件状态，例如不同的 props、不同的交互等等，并在 Storybook 中展示出来，方便开发者进行测试和交互式开发。

除了展示组件之外，Storybook 还提供了各种插件和工具，帮助开发者进行快速开发和调试。例如，可以使用插件将 UI 组件文档化，或者使用插件将组件库发布到 NPM 中。

使用 Storybook 还有一个好处是可以将组件库直接发布到 Storybook Hub 中，方便其他开发者使用和查看。同时，Storybook 还支持与各种测试工具和持续集成工具集成，可以方便地进行自动化测试和部署。

调试

npm run site

构建文档

npm run site:static

官方链接： https://storybook.js.org/

最后

如果跑不起来，或者使用过程中有什么问题，都可以直接评论留言，看到会及时回复。

觉得好用的话，求个点赞和star~

相关链接

github仓库：react-standard-components

低代码：
低代码平台实践系列（一）：逻辑配置概述