【Rollup】快速上手及其配置

概述

Rollup 是一款使用 ES Modules 标准的 JavaScript 打包工具。它也可以将项目中散落的细小模块打包为整块代码。

从作用上来看，Rollup 与 Webpack 非常类似。不过相比于 Webpack，Rollup 要小巧的多。因为 Webpack 在配合一些插件的使用下，几乎可以完成开发过程中，前端工程化的绝大多数工作。而 Rollup 可以说仅仅是一个 ESM 打包器，没有其它。

基本使用：

npm init

export default{
  h1: 'Hello World!'
}

export const log = msg => {
  console.log(`[logger] ${msg}`);
}
export const error = msg => {
  console.error(`[logger] ${msg}`);
}

import { log } from "./logger";
import message from "./message";

const msg = message.h1
log(msg); // Hello World

npx rollup ./src/index.js --format iife --file dist/bundle.js

• npx rollup 需要打包的文件 --format 打包格式 --file 输出文件路径

(function () {
  'use strict';

  const log = msg => {
    console.log(`[logger] ${msg}`);
  };

  var message = {
    h1: 'Hello World!'
  };

  const msg = message.h1;
  log(msg); // Hello World

})();

rollup 会自动开启 tree-shacking，对于没有引用到的代码不用进行打包。

配置

rollup.config.js

module.exports =  {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    }
}

使用命令执行打包：

npx rollup --config

默认不会使用配置文件，需要用 --config 指定。

插件

使用 rollup-plugin-json 演示。插件用于扩展功能。

npm i rollup-plugin-json --dev

const json = require('rollup-plugin-json');
module.exports =  {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    },
    plugins: [
      json(),
    ]
}

import { log } from "./logger";
import message from "./message";
import { name, version } from "../package.json";

const msg = message.h1
log(msg); // Hello World
log(name)
log(version)

导入 json 文件，进行打包，打包成功。

这里只是用了 name，version，所以只对他们进行打包了。其余没有使用到的通过 tree-shacking 没有打包。

加载 npm 模块

rollup 默认只能加载文件路径中的模块，对于第三方模块，不进行加载，所以需要通过 rollup-plugin-node-resolve 这样一个插件进行加载第三方模块。

使用该插件，就可以通过模块名称导入第三方模块了。

npm i rollup-plugin-node-resolve --dev

const json = require('rollup-plugin-json');
const resolve = require('rollup-plugin-node-resolve');

module.exports =  {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    },
    plugins: [
      json(),
      resolve()
    ]
}

我们这里使用 ms 这个第三方模块

npm i ms

import ms from "ms";
import { log } from "./logger";
import message from "./message";
import { name, version } from "../package.json";

const msg = message.h1
log(msg); // Hello World
log(name)
log(version)
log(ms(`${hours}h`));

打包后，发现报错：

这里报错是因为 rollup 默认加载 esm 模块，而没有加载 cjs 模块，但是没有报错安装第三方模块，因此安装第三方模块的问题解决。

至于如何解决没有加载 cjs 模块，看接下来的部分。

加载 cjs 模块

rollup 默认只是加载 esm 模块。

所以上述报错的原因是：ms模块没有默认的导出声明，可以使用@rollup/plugin-commonjs来尝试解决此类问题，

npm i -D rollup-plugin-commonjs

const json = require('rollup-plugin-json');
const resolve = require('rollup-plugin-node-resolve');
const commonjs = require('rollup-plugin-commonjs');

module.exports =  {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife'
    },
    plugins: [
      json(),
      resolve(),
      commonjs()
    ]
}

然后打包成功！

代码分包

可以使用动态导入的方式实现按需加载，rollup 内部也会自动进行代码分包。

// import ms from "ms";
// import { log } from "./logger";
// import message from "./message";
// import { name, version } from "../package.json";

// const msg = message.h1
// log(msg); // Hello World
// log(name)
// log(version)
// log(ms(`${hours}h`));

import("./logger").then(({ log }) => log("Hello World"));

直接打包报错，iife 标准不会对代码进行拆分。所以要使用 amd 或者 cmd 标准。

我们要在 浏览器中使用，只能使用 amd 标准。

const json = require("rollup-plugin-json");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");

module.exports = {
  input: "src/index.js",
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'
    dir: "dist",
    format: "amd",
  },
  plugins: [json(), resolve(), commonjs()],
};

然后就可以进行代码分包了。

多入口打包

多入口打包会自动进行代码分包，所以要使用 amd 标准。

然后，我们只需要将入口写成数组的形式，或者对象的形式即可进行多入口打包。

const json = require("rollup-plugin-json");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");

module.exports = {
  input: ["src/index.js", "src/index2.js"],
  output: {
    // file: 'dist/bundle.js',
    // format: 'iife'
    dir: "dist",
    format: "amd",
  },
  plugins: [json(), resolve(), commonjs()],
};

对于 amd 输出的 js 文件，我们不能直接引用到页面上，必须通过实现 amd 标准的库加载。

所以写一个 html 文件：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- data-main: 指定 require 加载的模块入口 -->
  <script src="https://unpkg.com/[email protected]/require.js" data-main="bundle.js"></script>
</body>
</html>

然后在终端通过：

serve dist

开启 一个 http 服务运行 dist 文件。

rollup 总结

优势：

• 输出结果更加扁平，执行效率更高
• 自动移除未引用的代码，摇树
• 打包结果完全可读

缺点：

• 加载非ESM的第三方模块比较复杂，需要额外的插件配置
• 模块最终都被打包到一个函数中，无法实现HMR
• 浏览器环境中，代码拆分功能依赖AMD库

所以开发应用程序最好使用 webpack，而开发类库 / 框架 则最好使用 rollup。