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

你可能感兴趣的:(Rollup-下一代模块打包工具实例教程)