rollup的使用

rollup是一个JavaScript模块打包器，它对代码模块使用es6的标准格式，而不是commonjs或者AMD。

安装

npm i -D rollup
复制代码

使用

rollup可以通过命令行接口、配置文件或者JavaScript Api这三种方式来调用。

1. 命令行用法

假设入口是src/index.js，输出文件为dist/bundle.js，输出格式为esmodule，则使用以下命令

$ rollup src/index.js -o dist/bundle.js -f esm
复制代码

-f是--output.format的缩写，指定创建的bundle的类型，可选值值是cjs、esm、system、amd、iife、umd。

这种方法在生成sourcemap时灵活性不高。

2. 配置文件用法 假设入口是src/index.js，输出文件为dist/bundle.js，输出格式为commonjs。

创建一个rollup.config.js的文件，内容如下

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'esm'
    }
}
复制代码

使用配置文件的方式

$ rollup --config [configfilname]
$ rollup -c [configfilname]
复制代码

如果配置文件rollup.config.js和package.json在同一层级，那么rollup会自动使用配置文件，可以不用写配置文件的名字。

rollup和其他工具集成

1. npm包

对于npm包来说，rollup不能直接处理依赖，需要通过插件rollup-plugin-node-resolve。

npm上既有esmodule格式的包，也有commonjs的包，rollup可以直接处理第一种，第二种需要通过额外的插件rollup-plugin-commonjs将commonjs转成es2015。

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'esm'
    },
    plugins: [
        resolve(),
        commonjs(),
    ]
}
复制代码

babel

babel需要通过插件rollup-plugin-babel来引入。然后在配置文件中添加

import babel from 'rollup-plugin-babel';

export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'esm'
    },
    plugins: [
        babel({
            include: 'src/**'
            exclude: 'node_modules/**'   
        }),
    ]
}
复制代码

其他

代码压缩

要对rollup打包后的代码进行压缩，可以引入插件rollup-plugin-uglify，但是这个插件只支持es5，不支持es6+。所以实际开发中建议在代码被rollup打包后另外使用工具压缩，比如uglify-es和terser。但是uglify-es作者目前不再维护，至于terser是对uglify-es的fork，并且保留了与uglify-es和uglify-js@3的API和CLI兼容性，在最新版的webpack@4中也用terser-webpack-plugin取代了uglify-webpack-plugin，所以推荐使用terser来压缩es6+代码。

总结

看网上说rollup由于没有额外代码所以打包的体积比较小，经过测试，使用terser压缩rollup打包后代码对比webpack@4打包，webpack@4的包体积更小。

总的来说，rollup使用方便，很容易将多文件打包成单文件，而且打包后的代码纯净易读，不像webpack打包后有很多额外代码。缺点是对输出成多文件基本不支持。对于小型的代码库比较推荐。