Rollup-下一代模块打包工具实例教程

项目地址:可以下载进行查看学习,在下面提到的插件基本在我的demo项目中都有用到。

如果你在使用我的demo项目中有什么问题,可以在文章下面留言,我们一起交流学习

特别声明

如果你的工作内容是基于es2015(也就是es6),并且不需要代码分割,也不需要模块热替换(HMR),那么你可以很愉快的使用rollup进行开发了。不然,建议使用gulp+rollup。让gulp去解决那些问题。

优势(与webpack相比)

  • 代码的内容格式:编译运行出来的内容,人能看,并且能调试。如果你没办法理解我说的话,可以去看看webpack打包出来的代码

  • 命令行的角度:比webpack更加的人性化,有什么问题或者警告都很详细的描述出来,并且准确的提供问题所在文件的位置,方便查找问题

  • 如果是引入第三方的js,一旦import进来就会加载进入入口文件中,但如果不是第三方的js,要引入进来之后只有当你对它进行export或者运行了它,才会被解析到入口文件中

所用插件

  • "babel-plugin-external-helpers": 这个模块是在.babelrc文件中体现,目的是让babel转义出来的帮助性代码只在该文件的头部出现一次,而不会再每个引入的模块中加入

  • "babel-preset-latest": 这个模块也是在.babelrc文件中体现,目的是让babel转义的操作移至的最后,等rollup编译代码之后,否则会出错

  • "rollup-plugin-babel": babel转义

  • "rollup-plugin-node-resolve": 将import的代码的代码和自己写的代码打包打在一起

  • "rollup-plugin-uglify": 压缩代码

  • "rollup-watch": 实时监听代码,有修改自动编译

比较好用的插件

  • rollup-plugin-multi-entry 多入口打包情况
  • rollup-plugin-multidest 多出口打包情况
  • gulp-rollup-each 基于gulp的rollup转译的多入口到多出口(本项目中没有涉及到)
  • rollup-plugin-license 增加文件头部注释

体积比较

针对于本项目来说:

不使用压缩的前提:rollup打包出来的比webpack的少大概120kb
使用压缩的前提:rollup打包出来的比webpack的少大概30kb

工具使用问题总结

  • 当format改变为umd和iife的时候,如果你的入口文件中有export,那么就需要添加moduleName这个参数,为它产出的文件整体加个变量
    问题解决地址:https://github.com/rollup/rollup/issues/1157

  • 当你遇到下面这个问题的时候:

    Error transforming bundle with 'uglify' plugin: SyntaxError:

    你可以使用"uglify-js-harmony"这个库配合"rollup-plugin-uglify"使用,我在项目也详细使用到了。

    问题解决地址:rollup-plugin-uglify issues地址

相关文章

同中有异的 Webpack 与 Rollup

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 12,542评论 7 35
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,830评论 1 32
  • -- 1. Gulp VS webpack 比较 Gulp 是一个任务管理工具,让简单的任务更清晰,让复杂的任务易...
    慢清尘阅读 8,883评论 7 16
  • 你是不是也在为可以使用ES6的新特性而兴奋,却不太确定应该从哪开始,或者如何开始?不止你一个人这样!我已经花了一年...
    MrDream阅读 5,704评论 0 3
  • 1、检出 2、导出(导出一个干净的不带.svn文件夹的目录树) 注:第一种从版本库导出干净工作目录树的形式是指定U...
    西漠阅读 15,183评论 4 3