基于rollup+typescript+gulp+less搭建react前端组件库。输出esm、umd、cjs三种格式，支持服务端渲染、cmd导入和es6规范。使用rollup编译输出格式（方便易用的代码比webpack更干净），gulp构建，考虑到三种规范，需要支持服务端渲染。我们需要根据编码后的文件结构输出cjs和es标准组件，比如编码src/components/button组件，然后输出es，cjs标准文件结构应该是es/components/button和cjs/components/按钮。对于cjs和es规范，我们还需要考虑对服务端渲染的支持。我们知道服务端渲染只关心html片段，不关心样式。样式全部注入并呈现在浏览器中。那我们就得考虑在写组件的时候不引入样式。那么在不导入样式的情况下，如何让样式在开发和生产环境使用时生效。聪明的朋友其实已经想到了，我们可以解析语法树，主动在import样式中注入一行代码。然后我们可以使用babel写一个插件，使用babel解析语法树来动态注入脚本代码，比如在你的组件脚本中注入import'./index.less'；这样的代码。没错，antddesign的babel-import-plugin插件就是干这个的。我们将使用这个插件来做同样的事情。如果你想自己搭建一个babel插件，你也可以查看babel官方文档或者看我的另一篇关于如何编写babel插件的文章。对于umd，我们需要考虑浏览器直接使用cnd的方式，需要将样式和脚本打包成一个文件，方便导入。基于以上原因，我们考虑我们要编译生成的文件结构需要是什么样的，会用到什么工具。文档工具（dumi）本来是想直接用dumi来编译组件库的，但是我用dumi试验了一下，发现问题很多，可能是使用方式不对，所以直接用rollup重新配置一套，而dumi只是用来构建文档工具工具构建工具使用的是gulp（在构建方面比webpack好用很多）。首先，在package.json中，在script字段添加脚本命令，用于gulp构建启动入口build:component，如下：{"scripts":{"start":"dumidev","build":"npm运行docs:build","docs:build":"dumibuild","docs:deploy":"gh-pages-ddocs-dist","build:component":"gulp",},}build:component.启动gulp命令。新版gulp会自动搜索gulpfile.js文件，然后执行里面的index脚本。注意gulpfile.js是文件名，不是js脚本。具体可以参考gulp官方文档JavaScript和Gulpfile最终编译输出目录结构上面已经说了，我们最终会输出三种标准化的代码，es,cjs,umd。然后我们将这三个规范输出到根目录下的dist目录下的es、cjs、dist这三个目录。同时规范下的组件输出目录与源码组件编译目录一致：如下：规范输出文件下方为组件输出目录（以es规范为例，cjs一致，dist在cdn中使用时被打包成js文件）如前所述我们不会在组件中引入样式。为了支持服务端渲染，我们在使用组件库时需要使用babel-import-plugin主动配置导入规则。那么我们需要统一样式生成规则，方便导入。这里我们会在所有组件下生成一个样式文件来存放样式，然后使用babel-import-plugin注入这样一行代码import'./style/index';所以我们组件的编写方式和生成格式如下图所示：以编写的checkbox组件为例，这是源码文件结构。可以看到源码的style文件是用来存放checkbox组件的样式的，然后下面有一个index脚本用来导出所有样式文件的导出就是输出es标准目录结构，类似于cjs，可以看到我们输出了css和less两种文件（这样的两种输出是通过gulp完成的，后面会讲到）因为我们需要支持使用css和less预编译的使用。我们还生成了index.js脚本和css.js脚本。index脚本作为less用户的入口，css.js作为css的入口。css入口less入口使用css时，我们使用babel-import-plugin配置编译注入import'./style/到checkbox入口文件css'；像这样的代码。使用less时，我们配置编译注入import'./style/index';像这样的代码。那么我们在服务端渲染的时候就不需要关心样式了。我们只需要生成html片段，而不需要使用babel-import-plugin。然后在浏览器cdn导入的时候，我们可以从umd规范中导入整个样式包，也就是output目录下的dist目录：ti.css里面包含了所有的组件样式关于主题定制我使用主题定制的方式是使用lessvariablestocover我们在一个文件中定义了所有变量变量ColorfilelessvariablesCoverage，可以在使用库时覆盖同名变量。本章我们先说说目标的实现。下一章我们将基于rollup+typescript+gulp+less（二）构建一个react前端组件库，并开始介绍如何实现。（不对的地方请指出）
