rollup

rollup是一个JavaScript打包器，将多个相互依赖的JS文件打包成一个。

什么是打包器

早期的JS开发中，网页开发者有两种方案：

把所有代码写进一个JS文件里，浏览器一次加载
根据JS的依赖关系，按从上往下的顺序使用script标签加载JS文件，浏览器要一个个地下载JS

随着应用功能的增加，数量过多的JS文件下载会造成较大的网络耗时。
最重要的是，如果一个文件发生异常，依赖这个文件的JS也会受到影响，异常处理会增加开发成本。

为方便管理这个过程，出现了当时流行的模块加载器seaJS、requireJS。这些模块加载器也推广了JS模块化的概念，产生了CMD、AMD、UMD这些模块化方案。

模块加载器解决的是方案2的问题，而打包器解决的方案1的问题：打包器也遵循模块化方案。开发者可以按模块开发JS，打包器根据应用程序入口文件，加上依赖的模块文件，打包成一个文件。通过代码分割，也可以打包成多个文件。

rollup打包产物

rollup是一个纯净的打包器，只负责模块文件的打包功能。

直接打包

如下文件，交给rollup打包成cjs

console.log('hello')

产物内容是

'use strict';

console.log('hello');

模块打包

另一个例子，ES模块文件，交给rollup打包成cjs

//main.js
import { sayHello } from './mod'

sayHello()

//mod.js
export function sayHello(){
    console.log('hello')
}

产物内容是

'use strict';

function sayHello(){
    console.log('hello');
}

sayHello();

代码分割

代码分割后就引入了“如何加载模块”的问题，rollup按照模块化方案的约定，只负责处理符合约定的模块打包工作，并不会处理模块加载问题，那是模块加载器解决的问题。

例如上面模块打包的例子，配置代码分割后，根据不同的输出格式配置，rollup打包产物如下

cjs

//main.js
'use strict';

var mod = require('./mod.js');

mod.sayHello();

//mod.js
'use strict';

function sayHello(){
    console.log('hello');
}

exports.sayHello = sayHello;

其中require()是cjs定义的加载模块的方式，不能直接在浏览器中运行。

amd

//main.js
define(['./mod'], (function (mod) { 'use strict';

    mod.sayHello();

}));

//mod.js
define(['exports'], (function (exports) { 'use strict';

    function sayHello(){
        console.log('hello');
    }

    exports.sayHello = sayHello;

}));

其中define()是amd的模块定义方式，不能直接在浏览器中运行。

//main.js
import { s as sayHello } from './mod.js';

sayHello();

//mod.js
function sayHello(){
    console.log('hello');
}

export { sayHello as s };

其中import、export是ES模块语法，需要指定ES模块的加载方式，才能在支持ES模块的浏览器中运行。

rollup 的优势与不足

rollup的优势和劣势都是它的纯粹，只做JS打包器这一件事。

rollup是各JS开发库首选的打包器。

rollup不是开箱即用的前端开发者脚手架。
尽管可以通过一系列的配置和开发来实现脚手架功能，例如vite，实际上rollup也只处理了打包器的工作。

rollup ​

什么是打包器 ​

rollup打包产物 ​

直接打包 ​

模块打包 ​

代码分割 ​

rollup 的优势与不足 ​