rollup.js 简介

rollup.js 简介

• Webpack vs Rollup
• Rollup语法
• Tree-shaking
• Webpack and Rollup: the same but different
• Google Closure Compiler

Webpack vs Rollup

在Webpack已经是霸主地位的构建打包天下，杀出一个Rollup。Vue, Ember, Preact, D3, Three.js, Moment, etc. 一些很有名的js库，甚至最近React，都使用纷纷使用Rollup来作为打包工具。所以Rollup想必有它的优势。

Rollup语法

Rollup的语法比Webpack更加简单，文档教程比Webpack更加循序渐进，按顺序全部看一遍，虽然没有中文，但英文读下来基本没有障碍。有JavaScript-API的使用方法，也有指定配置文件形式的CLI的方法，这里就只介绍配置文件的用法。

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import buble from 'rollup-plugin-buble';

export default {
  // 入口文件
  entry: 'src/main.js',

  // 指定打包后js的代码格式 - 'amd', 'cjs', 'es', 'iife', 'umd'
  format: 'cjs',  

  // 使用的插件
  plugins: [
    buble(),
    resolve(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    })
  ],

  // 可以同时打包输出多个格式的js文件
  targets: [
    { dest: 'dist/bundle.cjs.js', format: 'cjs' },
    { dest: 'dist/bundle.umd.js', format: 'umd' },
    { dest: 'dist/bundle.es.js', format: 'es' },
  ],

  //也可以是一个
  dest: 'bundle.js'
};

如果使用balel插件，就需要在src目录下新建.babelrc文件

// src/.babelrc
{
  "presets": [
    ["latest", {
      "es2015": {
        // 指定babel不要把es2015的模块转换为commonjs的
        "modules": false
      }
    }]
  ],
  "plugins": ["external-helpers"]
}

Tree-shaking

这个概念是Rollup提出来的。

Rollup推荐使用ES2015 Modules来编写模块代码，这样就可以使用Tree-shaking来对代码做静态分析消除无用的代码，可以查看Rollup网站上的REPL示例，代码打包前后之前的差异，就会清晰的明白Tree-shaking的作用。

• 没有使用额外的模块系统，直接定位import来替换export的模块
• 去掉了未被使用的代码

打包前的js代码

// main.js (entry module)
import { cube } from './maths.js';
console.log( cube( 5 ) ); // 125

// ./maths.js
// This function isn't used anywhere, so
// Rollup excludes it from the bundle...
export function square ( x ) {
    return x * x;
}

// This function gets included
export function cube ( x ) {
    return x * x * x;
}

打包后的js代码

'use strict';

// This function isn't used anywhere, so
// Rollup excludes it from the bundle...

// This function gets included
function cube ( x ) {
    return x * x * x;
}

console.log( cube( 5 ) ); // 125

更多Tree-shaking代码示例

Rollup之所以能可以用Tree-shaking来消除无用的代码

主要为以下四个原因（摘自尤雨溪在知乎的回答）：

1. import只能作为模块顶层的语句出现，不能出现在 function 里面或是 if 里面。
2. import 的模块名只能是字符串常量。
3. 不管 import 的语句出现的位置在哪里，在模块初始化的时候所有的 import 都必须已经导入完成。
4. import binding 是 immutable 的，类似 const。比如说你不能 import { a } from ‘./a’ 然后给 a 赋值个其他什么东西。

Webpack and Rollup: the same but different

Rollup作者最近的一片文章里分析了Webpack和Rollup的不同之处。总结是说Webpack适合在单页应用Web App上使用，Rollup适合使用在独立的js库上。

Use Webpack for apps, and Rollup for libraries

Webpack核心功能包括Code-splitting（按需加载js）和Static assets（处理各种格式的资源）。

Rollup到目前为止不支持Code-splitting和hot module replacement (热更新)，它更趋向专注于构建分发类的js库，也就是说大多只会生成一个js文件来被其他项目依赖，更好的利用ES2015 modules的优势来缩小和优化代码。

Rollup在15年时候就已经发布，支持Tree-shaking，当时Webpack还是1.*的版本，没有使用Tree-shaking，而且每个模块外还要包一层函数定义，再通过合并进去的 define/require 相互调用，模块越多，这些包在外层的模块系统的函数就越多，造成打包后代码量的增大。

然而Webpack2.* 今年1月份才上线正式的版本，Rollup经过二年左右的发展也取向成熟，所以许多js库从纷纷使用了Rollup。

Webpack and Rollup: the same but different

Google Closure Compiler

Google开发的一个优化js代码的工具，能对源码做更深层次静态分析，更全面的优化达到高度压缩源码的效果，直接看一下的示例，在这不多做介绍。

Google Closure Compiler

如何评价 Webpack 2 新引入的 Tree-shaking 代码优化技术？
今天，你升级Webpack2了吗？
Webpack and Rollup: the same but different
使用 Rollup 和 Buble 编译 JS 库
Closure Compiler Advanced

微信号：feworld
前端这么大我想去看看