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

背景

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

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

技术栈

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

组件库用Rollup.js构建,目前支持2种format:umdesm。目前主要的使用方式还是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

低代码:
低代码平台实践系列(一):逻辑配置概述

你可能感兴趣的:(前端开发,react.js,typescript,less,前端工程化,组件库)