基于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/button。cjs，es标准咱们还要思考对服务端渲染的反对。咱们晓得服务端渲染只关怀html片段，并不关怀款式，款式都是在浏览器注入渲染实现。那么咱们编写组件的时候就要思考不导入款式了。那么不导入款式咱们又怎么在开发的时候以及生产环境应用的时候让款式失效呢。聪慧的敌人其实曾经想到咱们能够解析语法树而后被动注入一行代码进入导入款式。那么咱们就能够应用babel编写一个插件，应用babel解析语法树动静去注入脚本代码，比方给你的组件脚本注入import './index.less';这样的代码。没错这就是antd design的babel-import-plugin插件干的事件。咱们将应用这个插件做一样的解决，如果想本人造一个babel插件的敌人也能够查看[babel官网文档]或者查看我另外一片文章如何编写babel插件(https://www.babeljs.cn/docs/)。
对于umd咱们要思考浏览器间接应用cnd的形式须要将款式与脚本打包到一个文件中不便导入。
接下来咱们挨个剖析怎么达到最终目标，首先咱们先来剖析咱们要达到目标最终要生成什么样子以及 会应用什么工具。

文档工具（dumi）

原本想间接应用dumi做组件库的编译，然而我用dumi试验了一下发现问题有点多，可能是应用形式不对，于是间接用rollup重新配置了一套，dumi只是做文档工具

构建工具

构建工具应用gulp(构建上比webpack好用太多)。首先package.json中，script字段增加一个脚本命令用于gulp构建启动入口build:component，如下：

{"scripts": {    "start": "dumi dev",    "build": "npm run docs:build",    "docs:build": "dumi build",    "docs:deploy": "gh-pages -d docs-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在应用组件库的时候被动去配置导入规定。那么咱们须要将款式生成规定对立不便导入，这里咱们将在所有组件上面独自生成一个style文件去寄存款式而后应用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配置编译给后checkbox的入口文件注入import './style/css';这样子的代码.应用less的时候咱们配置编译后注入import './style/index';这样子的代码。
那么在服务端渲染的时候咱们不须要关怀款式咱们只须要生成html片段，不应用babel-import-plugin即可，那么浏览器cdn导入的时候咱们能够从umd标准中去导入整个款式包，也就是输入目录上面的dist目录：

ti.css中就蕴含了所有的组件款式

对于主题定制

主题定制我采纳的形式是应用less的变量笼罩咱们将所有可变的变量定义在一个文件中


color文件

less的变量笼罩，在应用库的时候能够尽管去笼罩同名变量

这一章咱们先说实现目标，下一章咱们将开始将如何实现。（不对之处请指出）