使用webpack和rollup打包组件库的方法

前言

之前做了一个loading的样式组件，为了实现代码的可重用性，将这个小项目打包并且发布在了npm上。在一次次的打包发包过程中经历了一个有一个报错，@buzuosheng/loading这个组件已经到了2.7.0版本，虽然还有一些要调整的地方，但总算是可以用了。

webpack和rollup对比

webpack算是使用程序员使用最多的打包工具，面试中往往会问到webpack的相关问题，而rollup被问到的要少很多。导致这种现象的一个原因是，应用开发使用webpack，库开发使用rollup的说法。

但是两个打包工具都有很强大的插件开发功能，功能差异越来越模糊，但是rollup使用起来更加简洁，而且能打出能小体积的文件。但当我们做前端应用时，性能分析往往要求更小的库，所以rollup更符合开发库的要求。

这次算是一个打包的实验，我们使用两个工具都对这个项目打一次包。

使用webpack打包

在打包之前，需要给package.json文件中添加或更改一些字段。

webpack打包需要用到很多库来处理不同的文件，这个项目比较小，就只用了两个库。

本来应该写开发和生产两个环境下的配置，但在这里只写了production环境下的配置。

使用rollup打包

在rollup中使用的库比较多一点。

发包到npm

发包到npm只需要几个命令。

对项目打包后，命令行输出压缩包的详细信息。

更新版本

根据本次改动的大小选择不同的命令。

最后使用发布命令。

然后就会收到邮件，你的包已经发布成功。

到此这篇关于使用webpack和rollup打包组件库的方法的文章就介绍到这了,更多相关webpack和rollup打包组件库内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！