JS模塊彙總工具 rollup【實踐】

博客內容僅是個人實踐理解，僅供參考，如有錯誤，敬請指正，更多內容和詳情請訪問官方文檔

實踐理解

一：對rollup的認識？

1.rollup將多個小的模塊彙總合併成一個或多個大的模塊。

2.rollup可多種模塊化形式輸入，彙總後也可以多種模塊化形式輸出

3.rollup支持插件功能讓rollup更加靈活和強大

二：與webpack的用途適用比較

1.webpack更加適用於打包應用

2.rollup更加適用於打包類庫

實踐過程

一：初始化項目及其目錄結構：rollup-test

二：安裝rollup

全局安裝

npm i -g rollup

本地安裝（團隊協作時）

…

三：彙總前各模塊

彙總前目錄結構

es6模塊化規範下的三個文件（默認支持ES6模塊化規範，而不是commonJS）

src/js/es6/entry.js

import module1 from "./module1"
import module2 from "./module2"
let moduleName = 'entry'
function fn(){
    console.log(moduleName)
    console.log(module1.moduleName)
    console.log(module2.moduleName)
}
export default {
    moduleName,
    fn
}

src/js/es6/module1.js

let moduleName = 'module1'
let moduleShake = 'moduleShake_param'// 定義卻不被使用，tree-shake
console.log('module1')
export default {
    moduleName
}

src/js/es6/module2.js

let moduleName = 'module2'
console.log('module2')
export default {
    moduleName
}

四：命令行方式彙總模塊

1.彙總命令（爲方便運行，配置在package.json文件中）

  "scripts": {
    "dev:es6ToIife": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.iife.js --format iife",
    "dev:es6ToCjs": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.cjs.js --format cjs",
    "dev:es6ToUmd": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.umd.js --format umd --name \"myBundle\"",
    "dev:es6ToEs6": "rollup src/js/es6/entry.js --file dist/fromES6/bundle.esm.js --format es",
    "dev:cjsToCjs": "rollup src/js/cjs/entry.js --file dist/fromCJS/bundle.cjs.js --format cjs"
  },

2.彙總結果

• dist/fromES6/bundle.iife.js

(function () {
    'use strict';

    let moduleName = 'module1';
    console.log('module1');
    var module1 = {
        moduleName
    };

    let moduleName$1 = 'module2';
    console.log('module2');
    var module2 = {
        moduleName: moduleName$1
    };

    let moduleName$2 = 'entry';
    function fn(){
        console.log(moduleName$2);
        console.log(module1.moduleName);
        console.log(module2.moduleName);
    }
    var entry = {
        moduleName: moduleName$2,
        fn
    };

    return entry;

}());

• dist/fromES6/bundle.esm.js

let moduleName = 'module1';
console.log('module1');
var module1 = {
    moduleName
};

let moduleName$1 = 'module2';
console.log('module2');
var module2 = {
    moduleName: moduleName$1
};

let moduleName$2 = 'entry';
function fn(){
    console.log(moduleName$2);
    console.log(module1.moduleName);
    console.log(module2.moduleName);
}
var entry = {
    moduleName: moduleName$2,
    fn
};

export default entry;

• dist/fromCJS/bundle.cjs.js【彙總失敗，module1、module2並沒有被解析彙總】

'use strict';

let module1 = require('./module1');
let module2 = require('./module2');
let moduleName = 'entry';
function fn(){
    console.log(moduleName);
    console.log(module1.moduleName);
    console.log(module2.moduleName);
}
var entry = {
    moduleName,
    fn
};

module.exports = entry;

3.彙總結果分析

• es6模塊以各種模塊化規範（iife、commonJS、umd、es6）彙總輸出成功，而commonJS模塊化規範彙總輸出失敗（默認支持ES6模塊化規範而不是CommonJS）。
• 模塊內無用代碼會被tree-shake
• 不同模塊的同名變量會被自動加以區分，如moduleName$1、moduleName$2
• ES6代碼的import和export語法會被識別轉換到ES5語法，但其它ES6語法如let等並不會轉換（說明需要藉助babel插件）。

五：配置文件方式彙總模塊

1.創建配置文件（scripts/rollup.config.js）並配置scripts（package.json文件中）

  "scripts": {
    "dev": "rollup -c scripts/rollup.config.js",
    ...
   }

2.入口與輸出

單入口單輸出配置

// 單輸入單輸出
export default {
    input: 'src/js/es6/entry.js',
    output: {
    	file: 'dist/fromEs6/bundle.cjs.js',
        format: 'cjs',
        name:'vue',// 輸出的模塊名，默認爲入口名
        
}
};

單入口多輸出配置

// 單輸入多輸出
export default {
    input: 'src/js/es6/entry.js',
    output: [{
        file: 'dist/fromEs6/bundle.iife.js',
        format: 'iife'
    }, {
        file: 'dist/fromEs6/bundle.cjs.js',
        format: 'cjs'
    },
        {
            file: 'dist/fromEs6/bundle.umd.js',
            format: 'umd',
            name: 'myBundle'
        }, {
            file: 'dist/fromEs6/bundle.esm.js',
            format: 'es'
        },]
}

多入口多輸出配置

// 多輸入多輸出
export default [{
    input: 'src/js/es6/entry.js',
    output: [{
        file: 'dist/fromES6/bundle.iife.js',
        format: 'iife'
    }, {
        file: 'dist/fromES6/bundle.cjs.js',
        format: 'cjs'
    },
        {
            file: 'dist/fromES6/bundle.umd.js',
            format: 'umd',
            name: 'myBundle'
        }, {
            file: 'dist/fromES6/bundle.esm.js',
            format: 'es'
        },]
},{
    input: 'src/js/cjs/entry.js',
    output: [{
        file: 'dist/fromCJS/bundle.iife.js',
        format: 'iife'
    }, {
        file: 'dist/fromCJS/bundle.cjs.js',
        format: 'cjs'
    },
        {
            file: 'dist/fromCJS/bundle.umd.js',
            format: 'umd',
            name: 'myBundle'
        }, {
            file: 'dist/fromCJS/bundle.esm.js',
            format: 'es'
        },]
}]

2.配置文件中讀取運行命令參數

• 運行的命令

  "scripts": {
    "dev": "rollup -c scripts/rollup.config.js",
    "dev:lineParamTest": "rollup -c scripts/rollup.config.js --input entry.js",
    ...
   }

• 獲取參數（如獲取命令 rollup -c scripts/rollup.config.js --input entry.js 中的input配置）

// 讀取命令行參數作用在配置文件
export default commandLineArgs => {
    const inputBase = commandLineArgs.input || 'main.js';// 不傳人默認爲main.js

    delete commandLineArgs.input;
    return {
        input: 'src/js/es6/' + inputBase,
        output: {
            file: 'dist/fromEs6/bundle.cjs.js',
            format: 'cjs'
        }
    }
}

六：rollup插件

配置解析json（rollup默認只支持解析彙總js模塊）

需求：entryWithJson.js讀取package.josn文件內容

import module1 from "./module1"
import module2 from "./module2"
import { version } from '../../../package.json'// 不需要的內容會被tree-shake
let moduleName = 'entry'
function fn(){
    console.log(moduleName)
    console.log(module1.moduleName)
    console.log(module2.moduleName)
    console.log(version)
}
export default {
    moduleName,
    fn
}

安裝插件

npm i @rollup/plugin-json -D

配置文件引入解析json插件

import json from '@rollup/plugin-json'
export default {
    input: 'src/js/es6/entryWithJson.js',
    output: {
        file: 'dist/fromEs6/bundle.cjs.js',
        format: 'cjs'
    },
    plugins: [ json() ]
};

彙總結果（成功並且tree-shake，如下 var version = “1.0.0”;）

'use strict';

let moduleName = 'module1';
console.log('module1');
var module1 = {
    moduleName
};

let moduleName$1 = 'module2';
console.log('module2');
var module2 = {
    moduleName: moduleName$1
};

var version = "1.0.0";

let moduleName$2 = 'entry';
function fn(){
    console.log(moduleName$2);
    console.log(module1.moduleName);
    console.log(module2.moduleName);
    console.log(version);
}
var entryWithJson = {
    moduleName: moduleName$2,
    fn
};

module.exports = entryWithJson;

彙總後壓縮

安裝插件

npm i rollup-plugin-terser -D

配置引入壓縮插件

import json from '@rollup/plugin-json'// 解析json插件
import {terser} from 'rollup-plugin-terser'// 壓縮插件
export default {
    // input: 'src/js/es6/entryWithJson.js',
    output: {
        file: 'dist/fromEs6/bundle.min.cjs.js',
        format: 'cjs',
        name:"vue",
        plugins: [terser()]// 壓縮插件
    },
    plugins: [ json() ]
};

彙總結果

"use strict";console.log("module1");var o="module1";console.log("module2");var l="module2";var e={moduleName:"entry",fn:function(){console.log("entry"),console.log(o),console.log(l),console.log("1.0.0")}};module.exports=e;

彙總時代碼分割（分離動態/懶加載模塊）

需求：entryWithCodeSplit.js中動態加載的module1模塊打包時分離

export default function () {
    import('./module1.js').then(({ default: foo }) => console.log(foo));
}

配置代碼

import json from '@rollup/plugin-json'// 解析json插件
import {terser} from 'rollup-plugin-terser'// 壓縮插件
export default {
    // input: 'src/js/es6/entryWithJson.js',
    input: 'src/js/es6/entryWithCodeSplit.js',
    output: {
        // file: 'dist/fromEs6/bundle.min.cjs.js',
        entryFileNames: 'bundle.min.cjs.js',
        dir:"dist/fromEs6/codeSplit/",// 不給定dir將會輸出在控制檯
        format: 'cjs',
        name:"vue",
        plugins: [terser()]// 壓縮插件
    },
    plugins: [ json() ]
};

彙總結果

更多插件以及插件開發參考官方文檔