怎么理解web前端中的Rollup-创新互联

这篇文章主要讲解了“怎么理解web前端中的Rollup”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么理解web前端中的Rollup”吧!

创新互联基于成都重庆香港及美国等地区分布式IDC机房数据中心构建的电信大带宽,联通大带宽,移动大带宽,多线BGP大带宽租用,是为众多客户提供专业多线BGP机房报价,主机托管价格性价比高,为金融证券行业服务器托管,ai人工智能服务器托管提供bgp线路100M独享,G口带宽及机柜租用的专业成都idc公司。

rollup是一个JavaScript模块打包器,可以将小块代码编译成大块复杂的代码,其源码中模块的导入导出采用的是ES6模块语法,即源码需要采用ES6语法进行编写。

rollup与webpack的对比:

rollup只能处理js模块,而webpack可以处理任何资源,可以把所有的资源都当成模块进行处理。

rollup多适用于类库的打包,打包的代码需要供他人使用,webpack多适用于应用的打包。

rollup一般不会产生额外的代码(除了必要的cjs,umd头外),所以rollup打包出来的代码执行更快、可读性更强,webpack由于功能强大,所以会产生很多额外的代码、打包出来的文件较大、执行较慢、可读性较差

rollup会将所有资源放同一个地方,一次性加载,利用tree-shake特性来剔除未使用的代码,减少冗余,而webpack则是拆分代码、按需加载

rollup安装与基本使用

要使用rollup,需要在全局进行安装,如:

//全局安装rollup

>sudonpminstall--globalrollup

rollup安装完成后,就可以通过rollup命令进行打包了:

①rollup模块入口文件:

//进入项目根目录下,并以src目录下的index.js作为模块入口进行打包

>rollup./src/index.js

此时可以看到直接在控制台中输出了模块打包结果,因为没有指定将打包结果输出到哪个文件下,所以会直接输出打包结果到控制台中。

②指定模块输出,--file

//将打包结果输出到当前目录下的bundle.js文件中

>rollup./src/index.js--filebundle.js

③指定打包后的模块输出格式,--format

//将模块打包成iife格式,即将模块放到匿名自执行函数中执行

>rollup./src/index.js--filebundle.js--formatiife

如果没有指定format,那么默认会输出为es格式。rollup支持的模块输出格式为:es、cjs、amd、umd、iife、system。其中cjs就是CommonJS模块规范。

感谢各位的阅读,以上就是“怎么理解web前端中的Rollup”的内容了,经过本文的学习后,相信大家对怎么理解web前端中的Rollup这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联网站建设公司,,小编将为大家推送更多相关知识点的文章,欢迎关注!


网页名称:怎么理解web前端中的Rollup-创新互联
地址分享:http://hbruida.cn/article/gedgi.html