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代码

```js

// main.js (entry module)

import { cube } from './maths.js';

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

``js
// ./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

我来评几句
登录后评论

已发表评论数()

相关站点

+订阅
热门文章