webpack 组件发布-如何使用webpack和rollup打包组件库

2024-04-23 0 2,785 百度已收录

前言

我之前做了一个加载样式的组件。 为了实现代码的复用,我将这个小项目打包发布到npm上。 在包装和分包的过程中,我经历了一个又一个错误。 @buzuosheng/loading 组件已经达到2.7.0版本。 其实还有一些地方需要调整,不过终于可以用了。

webpack 和 rollup 的比较

Webpack是程序员使用最多的打包工具。 笔试中经常会问到与 webpack 相关的问题,而 rollup 则很少被问到。 造成这些现象的原因之一是应用程序开发使用webpackwebpack 组件发布,库开发使用rollup。

而且webpack 组件发布,这两款打包工具都具有非常强大的插件开发功能。 功能差异变得越来越模糊,rollup 使用起来变得更加简洁,并且可以生成小尺寸的文件。 但当我们做后端应用时,性能分析往往需要更小的库,所以rollup更符合开发库的要求。

这次算是一次封装实验。 我们使用两个工具将这个项目打包一次。

使用webpack打包

打包之前,需要在package.json文件中添加或修改一些数组。

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

本来我应该把开发环境和生产环境的配置都写好,但是这里只写了生产环境的配置。

使用卷式包装

rollup 中使用了更多的库。

分包给 npm

分包给 npm 只需要几个命令

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

更新后的版本

根据这种变化的大小选择不同的命令。

最后使用发布命令。

之后您将收到一封电子邮件,您的包已成功发布。

关于如何使用webpack和rollup打包组件库的文章到此结束。 有关 webpack 和 rollup 打包组件库的更多信息,请搜索之前的文章或继续浏览下面的相关文章。 希望大家以后也能支持我!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 webpack webpack 组件发布-如何使用webpack和rollup打包组件库 https://www.wkzy.net/game/200680.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务