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-plugin.js

export default function myExamplePlugin() {
    return {
        name: "my-example-plugin", // 此名称将出现在警告和错误中
        // rollup 还支持 resolveDynamicImport 钩子来解析动态导入（即 await import()）
        resolveId(source, importer, options) {
            // source 就是 import xxx from 后面的字符串（即被导入的模块路径）
            // 这个钩子用于将 source 解析为 ID
            // importer 就是使用 import xxx from xxx 语句的这个模块被 resolveId 得到的 ID
            // 在解析入口点时，importer 通常为 undefined
            if (source === "virtual-module") {
                // 这表示 rollup 不应询问其他插件或
                // 从文件系统检查以找到此 ID
                return source;
            }
            return null; // 其他ID应按通常方式处理
        },
        load(id) {
            // id 就是 resolveId 得到的 ID（未 resolveId 则保持 source 原样）
            if (id === "virtual-module") {
                // "virtual-module"的源代码
                return 'export default "This is virtual!"';
            }
            return null; // 其他ID应按通常方式处理
        },
    };
}

rollup.config.js

import myExamplePlugin from './rollup-plugin-my-example-plugin.js';
export default ({
  input: 'virtual-module', // 由我们的插件解析
  plugins: [myExamplePlugin()],
  output: [{
    file: 'bundle.js',
    format: 'es'
  }]
});

实例（摘自文档）

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