Rollup 试炼之路

qc1iu 发布于2019-08-22 11:00 / 1838人阅读

摘要：根据官网的解释，是下一代模块化工具。之后，模块化的写法将更加的趋势化，我们会将以前的文件切割成多个的细小模块。从的人数上，还是持有很大的保留意见的，所有我个人可能会在一些小型或者快速项目中做尝试而已。

最近看到挺多次 Rollup 这个词，再也架不住好奇，简单的学习实践了一下。完整项目库地址请戳。

PS: ES6 对应 ES2015，请忽略这些细节。

什么是 Rollup

Rollup Github 地址。根据官网的解释，Rollup 是下一代 ES6 模块化工具。ES6 之后，模块化的写法将更加的趋势化，我们会将以前的文件切割成多个的细小模块。那么如何来高效的组织管理这些文件，又有了很多不同的方案。现有的模块化打包已经有如
Browserify 和 Webpack ，那为啥还需要一个新的呢？

优势在哪

可以生成 AMD，CMD，UMD 甚至 ES6 模块文件。

Tree-shaking

tree-shaking(有知道中文怎么翻译的同学欢迎留言告知一下)，大致意思就是打包的时候会移除未使用到的 ES6 exports模块。想要更深入的了解 tree-shaking 的话，可以看下博士的这篇文章Tree-shaking with webpack 2 and Babel 6。

话题转回来，Rollup 正是使用了 ES6 的模块特性，所以会使打包后的文件体积更小。如果是 CommonJS 的则需要先通过插件转为 ES6 后处理。

对了，值得多说一句的是，Rollup 打包后的代码没有 require，import的，而是直接插入到文件中。

如何引用

Rollup 支持 CLI 和 JS API 方式，同时提供了一些插件如解决压缩 babel 转换等问题。(PS: 此处讲解采用 API 的方式)

首先在项目根目录创建 rollup.js 文件，安装 npm 的相关依赖

var rollup = require("rollup");
var babel = require("rollup-plugin-babel");
var uglify = require("rollup-plugin-uglify");

rollup.rollup({
    entry: "src/index.js",
    plugins: [
        babel({
            exclude: "node_modules/**",
            presets: [ "es2015-rollup" ]
        }),
        uglify()
    ]
}).then(function(bundle) {
    bundle.write({
        // output format - "amd", "cjs", "es6", "iife", "umd"
        format: "umd",
        moduleName: "dqSystem",
        sourceMap: true,
        dest: "dqSystem.js"
    });
});

rollup 方法可以配置一些入口文件，依赖插件等，返回的是 bundle 的 Promise 方法。bundle 方法中可以配置文件相关参数，同时也可以生成多份版本文件。具体的 API 参考官网

使用 node rollup.js 执行打包。另外 Rollup 好像还不支持 watch 的配置，我采用了 npm-watch 的方式跳过了。

采过的坑

试用时间不长，且内容比较简单，可能没碰到一些奇怪的点

Rollup.js 中可以 catch 下 error 方便调试错误

UMD/IIFE 模式中需要moduleName

Rollup 的模块引用只支持 ES6 Module，其他的需要采用 npm 和 commonjs 的插件去解决

自己YY下

不知道拿 Rollup 和 webpack 相比合不合适。我个人还是挺喜欢 webpack 的打包方式的，关键是功能强大，不过相比，配置也巨复杂。而 Rollup 的配置就简单很多了。实验的项目文件不大，所以没看出来两者在压缩体积上是否有明显的差异。Rollup 的tree-shaking也将会在 webpack2 中支持。所以好像并没有什么一定非它不可的感觉。

套用朋友说的一句话，“任何产品的生命周期都得看社区的活跃程度”。从 github 的 fock 人数上，还是持有很大的保留意见的，所有我个人可能会在一些小型或者快速项目中做尝试而已。

参考文章

Rollup Github

Tree-shaking with webpack 2 and Babel 6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91606.html

Python--Redis实战：第一章：初识Redis：第三节：你好Redis-文章投票试炼

摘要：为了防止用户对同一篇文章进行多次投票，网站需要为每一篇文章记录一个已投票用户名单。上一篇文章实战第一章初识第二节数据结构简介下一篇文章实战第二章使用构建应用第一节登录和缓存上一篇文章： Python--Redis实战：第一章：初识Redis：第二节：Redis数据结构简介下一篇文章：Python--Redis实战：第二章：使用Redis构建Web应用：第一节：登录和cookie缓存 ...

Meils 2019-07-30 18:01 评论0 收藏0
webpack2-update之路

摘要：重要特性枚举特性增加了对特性的支持。重要特性另一个就是基于静态模块分析仅支持标准写法。这样之后整体只能通过的方式。另外在使用过程中默认是将和转为所以需要关闭预设功能。这样做的目的就是为了项目工程化实现大项目的分工协作提高开发效率。引言这里是webpack official提供的一到二的升级指南,二兼容一的写法,给我的感觉是二的写法更规范,使用起来也比较简洁。重要特性枚举特性1 ...

elva 2019-08-21 11:38 评论0 收藏0
2017-07-07 前端日报

摘要：前端日报精选了解中的全局对象和全局作用域张鑫旭鑫空间鑫生活子进程你应该知道的一切直出内存泄露问题的追查实践我他喵的到底要怎样才能在生产环境中用上模块化腾讯前端大会大咖说大咖干货，不再错过发布发布中文翻译在使用进行本地开发代码 2017-07-07 前端日报精选了解JS中的全局对象window.self和全局作用域self « 张鑫旭-鑫空间-鑫生活Node.js 子进程：你应该知道...

import. 2019-08-20 17:48 评论0 收藏0
rollup文档翻译中文文档

摘要：既可以通过一个配置文件使用命令行接口来调用，也可以他自己的使用。使用最简单的方法就是通过命令行接口。命令缩写会以监视模式运行。这时运行下将不会有错误抛出，包含导入的组件。介绍概览 rollup是一个js打包器，用来将很细碎的js编译打包成大的复杂的东西，像是一个库或者一个应用。其使用了ES6自带的新标准来格式化和打包js代码，而不是原先的Commonjs或者AMD这类解决方案。ES...

enrecul101 2019-08-20 17:31 评论0 收藏0