rollup模块打包器入门

一、简介

rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，其源码中模块的导入导出采用的是ES6模块语法，即源码需要采用ES6语法进行编写。

rollup与webpack的对比:

rollup只能处理js模块，而webpack可以处理任何资源，可以把所有的资源都当成模块进行处理。
rollup多适用于类库的打包，打包的代码需要供他人使用，webpack多适用于应用的打包。
rollup一般不会产生额外的代码(除了必要的cjs, umd头外)，所以rollup打包出来的代码执行更快、可读性更强，webpack由于功能强大，所以会产生很多额外的代码、打包出来的文件较大、执行较慢、可读性较差
rollup会将所有资源放同一个地方，一次性加载,利用 tree-shake特性来剔除未使用的代码，减少冗余，而webpack则是拆分代码、按需加载

二、安装与基本使用

要使用rollup，需要在全局进行安装，如:

// 全局安装rollup
> sudo npm install --global rollup

rollup安装完成后，就可以通过rollup命令进行打包了:

① rollup 模块入口文件:

// 进入项目根目录下，并以src目录下的index.js作为模块入口进行打包
> rollup ./src/index.js

此时可以看到直接在控制台中输出了模块打包结果，因为没有指定将打包结果输出到哪个文件下，所以会直接输出打包结果到控制台中。

② 指定模块输出， --file

// 将打包结果输出到当前目录下的bundle.js文件中
> rollup ./src/index.js --file bundle.js

③ 指定打包后的模块输出格式，--format

// 将模块打包成iife格式，即将模块放到匿名自执行函数中执行
> rollup ./src/index.js --file bundle.js --format iife

如果没有指定format，那么默认会输出为es格式。rollup支持的模块输出格式为: es、cjs、amd、umd、iife、system。其中cjs就是CommonJS模块规范。

④ 指定打包后模块的输出结果接收变量，--name
即指定一个变量用于接收打包后的模块输出结果

// 用result变量来接收模块的输出结果
> rollup ./src/index.js --file bundle.js --format iife --name result

输出结果如下:

var result = (function () {
    'use strict';
    const foo = "foo";
    return foo;
}());

⑤ 源码中模块的导入导出必须使用es6模块语法
如果源码中模块的导入导出采用的是CommonJS模块语法，那么打包后仍然会包含require，如:

// foo.js
const foo = "foo";
module.exports = foo;

// index.js
const foo = require("./foo");
console.log(foo);
module.exports = foo;

> rollup ./src/index.js --file bundle.js --format cjs

打包后的输出结果中仍然包含require语法

'use strict';

const foo = require("./foo");
console.log(foo);
module.exports = foo;

从打包结果可以看到，源码中的require语句原封不动输出到了bundle.js中，由于bundle.js的路径不固定，故require("./foo")执行可能因为找不到模块而失败。

三、使用配置文件打包

要使用配置文件进行打包，需要带上-c参数，后面接配置文件即可，配置文件默认位置在项目根目录下，默认文件名为rollup.config.js。

① 在项目根目录下新建一个rollup.config.js文件

// rollup.config.js
export default {
    input: "src/index.js", // 指定模块入口
    output: {
        file: "bundle.js", // 指定模块输出文件路径
        format: "cjs" // 指定模块输出格式
    }
}

② 通过rollup -c 加载配置文件进行打包

// 使用项目根目录下的rollup.config.js配置文件进行打包
> rollup -c

四、使用插件

rollup也支持我们使用一些插件来为打包提供更大的灵活性。
① 使用babel插件编译我们的js文件

// 首先安装rollup-plugin-babel插件
> npm install rollup-plugin-babel --save-dev

② 在配置文件中引入babel插件

import bable from "rollup-plugin-babel"; // 引入babel插件

export default {
    input: "src/index.js",
    output: {
        file: "bundle.js",
        format: "cjs"
    },
    plugins: [
        bable({ // 添加babel插件
            exclude: "node_modules/**" // 排除node_modules下的文件
        })
    ]
}

③ 添加.babelrc文件

// 安装babel预设
> npm install @babel/preset-env --save-dev

即用@babel/preset-env模块中定义的预设进行处理，所以需要安装@babel/preset-env模块

{
    "presets": [
        "@babel/preset-env" // 添加安装好的预设
    ]
}

此时再打包，源码中的es6语法就能被转换为es5了。

链接: https://www.fly63.com/article/detial/9006