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

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

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这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联网站建设公司，，小编将为大家推送更多相关知识点的文章，欢迎关注！