JavaScript构建工具_Rollup配置与插件开发

Rollup 是轻量级 JavaScript 模块打包工具，适合构建库项目，支持 ES 模块和 Tree-shaking。配置文件 rollup.config.js 定义 input 和 output，支持 cjs、es、umd、iife 等格式，可输出多格式文件。通过 plugins 引入 node-resolve、commonjs、terser 等插件处理模块解析、CommonJS 转换和代码压缩。自定义插件需提供 name 属性及钩子如 buildStart、transform，用于控制构建流程和代码处理。生产环境建议 external 排除第三方依赖，配合 peerDependencies 声明运行时依赖，使用 babel 提升兼容性并生成 sourcemap 便于调试。

Rollup 是一个高效的 JavaScript 模块打包工具，特别适合用于构建库（library）项目。相比 Webpack 更轻量，专注于 ES 模块的静态分析和 Tree-shaking，产出更干净、更小的代码。本文将介绍 Rollup 的基本配置方式以及如何开发自定义插件。

Rollup 基本配置

Rollup 的配置文件通常是 rollup.config.js，导出一个或多个配置对象。

以下是一个基础配置示例：

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs' // 可选：cjs, es, umd, iife 等
  }
};

常用输出格式说明：

立即学习“Java免费学习笔记（深入）”；

• cjs：CommonJS，适用于 Node.js
• es：ES 模块，保留 import/export，推荐用于现代浏览器或打包工具消费
• umd：通用模块定义，支持 AMD、CommonJS 和全局变量，适合发布到 npm 的兼容性库
• iife：立即执行函数，适用于直接在浏览器 script 标签中使用

若需生成多种格式，可配置多个输出：

output: [
  { file: 'dist/mylib.cjs.js', format: 'cjs' },
  { file: 'dist/mylib.es.js', format: 'es' },
  { file: 'dist/mylib.umd.js', format: 'umd', name: 'MyLib' }
]

常用插件配置

Rollup 核心功能精简，依赖插件扩展能力。通过 plugins 数组引入。

安装插件：

常见插件用途：

豆包AI编程

豆包推出的AI编程助手

1697

查看详情

• @rollup/plugin-node-resolve：允许 Rollup 从 node_modules 中导入模块
• @rollup/plugin-commonjs：将 CommonJS 模块转换为 ES 模块
• @rollup/plugin-replace：替换源码中的字符串，常用于环境变量注入
• rollup-plugin-terser：压缩代码

配置示例：

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

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

开发自定义插件

Rollup 插件本质上是一个对象，包含特定钩子（hooks），如 buildStart、transform、renderChunk 等。

插件结构示例：

function myPlugin() {
  return {
    name: 'my-plugin',
    buildStart() {
      this.info('开始构建...');
    },
    transform(code, id) {
      // 对每个模块的代码进行处理
      if (id.includes('.js')) {
        code = code.replace(/console\.log/g, '// console.log');
      }
      return { code, map: null };
    }
  };
}

关键点：

• 插件必须有 name 属性
• 使用 this.warn() 或 this.info() 输出信息
• transform 钩子接收模块代码和路径，返回处理后的代码

在配置中使用：

生产环境优化建议

构建库时注意以下几点：

• 启用 external 排除第三方依赖（如 react、lodash），避免被打包进去
• 配置 peerDependencies 在 package.json 中声明运行时依赖
• 使用 babel 插件处理语法兼容性（配合 @rollup/plugin-babel）
• 生成 sourcemap 提高调试体验：sourcemap: true

排除外部依赖示例：

external: ['react', 'react-dom'],
output: {
  globals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
}

基本上就这些。Rollup 配置简洁，插件机制灵活，适合打造高质量的 JS 库。掌握核心配置和插件开发，能更好控制构建流程。不复杂但容易忽略细节。

以上就是JavaScript构建工具_Rollup配置与插件开发的详细内容，更多请关注php中文网其它相关文章！