rollup 打包实践

原文链接

简介

rollup 是一款像 webpack 一样的JS代码打包工具。它特别适合类库的维护，有了它你可以把单个复杂庞大的类库拆分成多个文件模块编写，最终打包成符合UMD、AMD、ESM等格式的单个或多个文件。它可以利用最新的ES6+ modules 规范，Tree-Shaking 不需要的代码，这样你就可以放心的引入你喜欢类库中的某个方法，而不必担心引入整个类库。

Vue 官方使用

JS 模块化演进

• JS历史：没有模块化机制

// 全局变量污染、命名冲突
var global = '全局变量';
// 污染命名空间
window.jQuery = {};

// 其他脚本中声明同名变量导致被覆盖
var global = {};

• 方案1：IIFE（立即调用函数表达式）

// 利用闭包解决大量全局变量污染问题
// 最终导出的少量全局变量
window.jQuery = (function(){
   
    ...
    return jQuery;
})();

• 方案2：node 服务端 CommonJS 规范

// import the entire utils object with CommonJS
// 缺陷：同步全量加载
const utils = require( './utils' );
const query = 'Rollup';
// use the ajax method of the utils object
utils.ajax(`https://api.com?search=${
     query}`).then(cb);

// 导出
module.exports = {
   
    ...
};

• 方案3：浏览器端 AMD 规范

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {
   
    exports.verb = function() {
   
        return beta.verb();
        //Or:
        return require("beta").verb();
    }
});

著名的AMD两种实现，现在很少看见用了

1. Require.js
2. Sea.js

• 方案4：UMD 通用模块定义规范

// Vue.js
(function (global, factory) {
   
    typeof exports === 'object' && typeof module !== 'undefined' ?
        module.exports = factory() :
            typeof define === 'function' && define.amd ?
                define(factory) : (global.Vue = factory());
}(this, (function () {
   
    'use strict';

    ...
    return Vue;

})));

• 方案5：迟来的ES6标准: import/export

优势：

1. CommonJS 同步获取模块的方式不适合前端
2. AMD 怪异的使用方式和各版本实现上的歧义
3. ESM 统一标准规范形成语言特性
4. 语法层面的静态分析，Tree-Shaking
5. …

Tree-Shaking

• 更快、更轻、减少复杂度
• 便于rollup、webpack 减少代码膨胀

// import the entire utils object with CommonJS
const utils = require( './utils' );
const query = 'Rollup';