用 rollup + gulp 造个轮子，别说还挺香(用pullout造句)

前戏 我是16年入了前端的坑，17年知道了gulp和rollup这两个玩意儿。由于那时webpack势头很猛，便一直没有正眼瞧过它一眼。 直到20年进了一家小公司，做了很多类似的小项目，相同的代码拷来拷去，出现一个bug一堆项目都要改，实在恶心到我了。 于是不得不开始考虑将一些公共的方法和组件提取出 ... 前戏

推荐整理分享用 rollup + gulp 造个轮子，别说还挺香(用pullout造句)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:用roller造句,用role造句,用roll up造句,用rope造句,用roll up造句,用roll造句子,用roll up造句,用rope造句,内容如对您有帮助，希望把文章链接给更多的朋友！

我是16年入了前端的坑，17年知道了gulp和rollup这两个玩意儿。由于那时webpack势头很猛，便一直没有正眼瞧过它一眼。

直到20年进了一家小公司，做了很多类似的小项目，相同的代码拷来拷去，出现一个bug一堆项目都要改，实在恶心到我了。

于是不得不开始考虑将一些公共的方法和组件提取出来，做成一个第三方库来维护。而在库的封装方面，rollup相对于webpack具有一定的优势。

在此，便和大家分享一下如何自己造轮子，封装一个前端库并发布到npm仓库中去。

源码

这是我自己封装的3个库，有兴趣可以看看：

https://github.com/moohng/dan;

https://github.com/moohng/dui;

https://github.com/moohng/tui;

第一个是工具函数库，后面两个是UI库，目前已全部使用TypeScript重写。dui是基于Vue 3封装的，tui无任何依赖，通过tsx语法实现的。

由于后面没多久就离职了，也就没有封装更多方法和组件进去了，但还是具有一定的学习参考价值，尤其对于新手朋友。

每一个库从目录结构、打包命令、导出方式、ts类型支持、单元测试、自动发布等，几乎所有细节知识都涵盖到了。

实操

浏览百遍，不如实操一遍（文章基于tui来做介绍）。

目录结构

另外，还有lib和dist两个打包输出的目录没有列出来。

从上到下：

.github：GitHub自动打包发布的脚步配置目录；packages：存放tui组件库的源码；src：tui组件库演示demo目录；test：测试相关代码；webpack：暂时忽略，用于测试webpack打包用的；

后面的babel.config.json、gulpfile.esm.js、rollup.config.js、tsconfig.json分别是babel、gulp、rollup、ts的配置文件。

环境配置

tsconfig.json配置如下：

{ "compilerOptions": { "jsx": "preserve", // 支持jsx "module": "esnext", "target": "esnext", "declaration": true, // 生成相应的 .d.ts文件 "declarationDir": "lib", // 生成