如何使用JavaScript构建工具Rollup进行配置与插件开发？

Rollup是一款专注于ES模块打包的JavaScript构建工具，常用于开发第三方库。它通过静态分析将分散的模块合并为高效代码，相比其他打包器产物更简洁。理解配置方式和插件机制，能帮助我们应对复杂的构建需求。

Rollup基础配置

Rollup使用名为rollup.config.js的文件定义构建行为。最基础的配置包含输入和输出两项。

// rollup.config.js
export default {
  input: 'src/index.js',        // 入口文件
  output: {
    file: 'dist/bundle.js',     // 输出文件
    format: 'esm'               // 输出格式：esm、cjs、umd等
  }
};

常用配置项说明

• plugins：数组形式，放入需要的插件实例
• external：声明不被打包的依赖，如react、lodash
• watch：设为true可开启监听模式

使用已有插件

社区提供了大量插件，例如@rollup/plugin-node-resolve用于解析node模块，@rollup/plugin-commonjs转换CommonJS写法。

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: { file: 'dist/bundle.js', format: 'cjs' },
  plugins: [resolve(), commonjs()]
};

Rollup插件开发

Rollup插件本质是一个返回对象的函数，对象中包含各类钩子（hook）。钩子在打包不同阶段执行。

插件基本结构

function myPlugin(options) {
  return {
    name: 'my-plugin',          // 插件名，必填
    buildStart() {
      console.log('构建开始');
    },
    transform(code, id) {
      // 对代码做转换，返回新代码
      return code;
    }
  };
}

写一个简单插件示例

下面插件会在每次transform时，给文件顶部添加一行注释。

function addHeader() {
  return {
    name: 'add-header',
    transform(code, id) {
      if (id.endsWith('.js')) {
        const newCode = '// generated by rollupn' + code;
        return newCode;
      }
      return null;
    }
  };
}

export default {
  input: 'src/index.js',
  output: { file: 'dist/bundle.js', format: 'esm' },
  plugins: [addHeader()]
};

常见钩子介绍

掌握这些钩子，就能在打包流程中插入自定义逻辑，比如代码压缩、资源处理等。Rollup配置简单，插件机制清晰，适合需要精细控制构建过程的JavaScript项目。

JavaScriptRollupplugin_development修改时间：2026-07-31 08:15:17