簡單說下rollup就是隻將呼叫過的模組打包，做到儘量精簡的打包。

使用webpack 1.X 版本是無法利用該特性來避免引入冗餘模組程式碼的

webpack2 已經出來好幾款 beta 版本了，同樣也加上了對 Tree-shaking 的支援

1.src中的檔案

jquery.js

// 出口
import init from './init';
init(jQuery);

export default jQuery;

init.js

var init = function(jQuery){
    jQuery.fn.init = function (selector, context, root)
 
 {
        if (!selector) {
            return this;
        } else {
            var elem = document.querySelector(selector);
            if (elem) {
                this[0] = elem;
                this.length = 1;
            }
            return this;
        }
    }; 
    jQuery.fn.init.prototype = jQuery.fn;
};

export default
 
 init;

2.安裝包

pakage.json 包管理

npm init

開始安裝

npm i rollup rollup-plugin-babel babel-preset-es2015-rollup --save-dev

3.編譯

3.1 命令列編譯

rollup src/jquery.js --output bundle.js -f cjs

3.1.1 編譯成commonjs格式的檔案

'use strict';

var init = function(jQuery){
    jQuery.fn.init = function (selector, context, root)
 
 {
        if (!selector) {
            return this;
        } else {
            var elem = document.querySelector(selector);
            if (elem) {
                this[0] = elem;
                this.length = 1;
            }
            return this;
        }
    }; 
    jQuery.fn.init.prototype = jQuery.fn;
};

init(jQuery);

module.exports = jQuery;

另外還有幾種格式

amd /  es6 / iife / umd

3.1.2 umd

rollup src/jquery.js --output bundle.js -f umd

會報錯

You must supply options.moduleName for UMD bundles

這是因為我們在jquery.js中

export default jQuery;

我們使用配置方式進行編譯,就能指定匯出的模組名moduleName: 'jQuery'

3.2 配置編譯–rollup -c rollup.config.dev.js

rollup.config.dev.js

import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/jquery.js',
  format: 'iife',
  moduleName: 'jQuery',
  plugins: [babel() ],
  dest: 'bundle.js',
};

src中.babelrc

{
  presets: [
    ["es2015", { "modules": false }]
  ]
}

注意{ "modules": false }一定要有，否則一直報錯，錯誤如下所示

Error transforming E:\javascript\rollup-demo\src\jquery.js with 'babel' plugin:                                        It looks like your Babel configuration specifies a module transformer. Please                                        disable it. If you're using the "es2015" preset, consider using "es2015-rollup"                                        instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel f                                       or more information
Error: Error transforming E:\javascript\rollup-demo\src\jquery.js with 'babel'                                        plugin: It looks like your Babel configuration specifies a module transformer.                                        Please disable it. If you're using the "es2015" preset, consider using "es2015-                                       rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-                                       babel for more information
    at preflightCheck (E:\javascript\rollup-demo\node_modules\rollup-plugin-bab                                       el\dist\rollup-plugin-babel.cjs.js:43:102)
    at Object.transform$1 [as transform] (E:\javascript\rollup-demo\node_module                                       s\rollup-plugin-babel\dist\rollup-plugin-babel.cjs.js:104:18)
    at C:\Users\Ruyi\AppData\Roaming\npm\node_modules\rollup\src\utils\transfor                                       m.js:19:35
    at process._tickCallback (node.js:379:9)
    at Function.Module.runMain (module.js:459:11)
    at startup (node.js:138:18)
    at node.js:974:3

命令

rollup -c rollup.config.dev.js

3.3 配置編譯–node rollup.config.dev.js

rollup.config.dev.js

var rollup = require( 'rollup' );
var babel = require('rollup-plugin-babel');

rollup.rollup({
    entry: 'src/jquery.js',
    plugins: [ babel() ]
}).then( function ( bundle ) {
    bundle.write({
        format: 'umd',
        moduleName: 'jQuery', //umd或iife模式下，若入口檔案含 export，必須加上該屬性
        dest: 'bundle.js',
        sourceMap: true 
    });
});