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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,457评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,837评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,696评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,183评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,057评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,105评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,520评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,211评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,482评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2 335

推荐阅读更多精彩内容

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