rollup入门

September 13, 2022

文档：https://cn.rollupjs.org/introduction/

命令行

npm install --global rollup

打包成各种格式：

rollup main.js --file bundle.js --format iife
rollup main.js --file bundle.js --format cjs
rollup main.js --file bundle.js --format umd --name "myBundle"

rollup m1.js m2.js --dir dist

配置文件

json

{
    "scripts": {
        "build": "rollup -c"
    }
}

--config 默认使用 rollup.config.js 配置文件

import pkg from "./package.json" assert { type: "json" };
import resolve from "@rollup/plugin-node-resolve"; // 此插件提供查找外部模块的功能（即 node_modules 中的模块）
import commonjs from "@rollup/plugin-commonjs"; // 此插件提供转换 commonjs 为 es6 模块的功能

export default {
    input: "./src/main.js",
    output: [
        {
            file: "./dist/main.esm.js",
            format: "es",
        },
        {
            file: "./dist/main.umd.js",
            format: "umd",
            name: "main",
        },
    ],
    plugins: [resolve(), commonjs()],
};

使用 typescript 编写配置文件

rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript

声明配置文件环境变量

rollup -c --environment INCLUDE_DEPS,BUILD:production

配置文件将接收到 process.env.INCLUDE_DEPS === 'true' 和 process.env.BUILD === 'production'

插件开发

Rollup 插件中，我们声明一系列钩子，在模块构建的各种步骤中调用，支持异步。

rollup-plugin-my-example.ts

import { CustomPluginOptions, LoadResult, Plugin, PluginContext, ResolveIdResult } from "rollup";

export default function myExamplePlugin(): Plugin {
    return {
        name: "my-example-plugin", // 此名称将出现在警告和错误中
        // rollup 还支持 resolveDynamicImport 钩子来解析动态导入（即 await import()）
        resolveId(
            // https://cn.rollupjs.org/plugin-development/#resolveid
            this: PluginContext,
            // source 就是 import xxx from 后面的字符串（即被导入的模块路径）
            // 这个钩子用于将 source 解析为 ID
            source: string,
            // importer 就是使用 import xxx from xxx 语句的这个模块被 resolveId 得到的 ID
            // 在解析入口点时，importer 通常为 undefined
            importer: string | undefined,
            options: {
                attributes: Record<string, string>;
                custom?: CustomPluginOptions;
                isEntry: boolean;
            }
        ): ResolveIdResult {
            if (source === "virtual-module") {
                // 这表示 rollup 不应询问其他插件或
                // 从文件系统检查以找到此 ID
                return source;
            }
            return null; // 返回 null，则会转而使用其他 resolveId 函数，最终使用默认的解析行为
        },
        load(
            // https://cn.rollupjs.org/plugin-development/#load
            this: PluginContext,
            // id 就是 resolveId 得到的 ID（未 resolveId 则保持 source 原样）
            id: string
        ): LoadResult {
            if (id === "virtual-module") {
                // "virtual-module" 的源代码
                return 'export default "This is virtual!"';
            }
            return null; // 其他ID应按通常方式处理
        },
    };
}

rollup.config.ts

import { defineConfig } from "rollup";
import myExample from "./rollup-plugin-my-example";

export default defineConfig({
    input: "virtual-module", // 由我们的插件解析
    plugins: [myExample()],
    output: [
        {
            file: "bundle.js",
            format: "es",
        },
    ],
});

运行 npx rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript

则会生成 bundle.js

bundle.js

var virtualModule = "This is virtual!";

export { virtualModule as default };

实例（摘自文档）

function svgResolverPlugin() {
    return {
        name: "svg-resolver",
        resolveId(source, importer) {
            if (source.endsWith(".svg")) {
                return path.resolve(path.dirname(importer), source);
            }
        },
        load(id) {
            if (id.endsWith(".svg")) {
                const referenceId = this.emitFile({
                    type: "asset",
                    name: path.basename(id),
                    source: fs.readFileSync(id),
                    needsCodeReference: true,
                });
                return `export default import.meta.ROLLUP_FILE_URL_${referenceId};`;
            }
        },
    };
}

←Back to home

This work is licensed under CC BY-NC-SA 4.0