共计 2186 个字符，预计需要花费 6 分钟才能阅读完成。
基于 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 的变量笼罩，在应用库的时候能够尽管去笼罩同名变量
这一章咱们先说实现目标，下一章咱们将开始将如何实现。（不对之处请指出）
