共计 2440 个字符，预计需要花费 7 分钟才能阅读完成。
背景
原先在做低代码平台的时候，刚好有搭载 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
低代码：
低代码平台实际系列（一）：逻辑配置概述
