模块打包_Rollup插件开发-js教程-PHP中文网

模块打包_Rollup插件开发

夜晨

发布： 2025-11-30 20:33:24

原创

326人浏览过

开发Rollup插件需理解其钩子机制，核心是name属性和resolveId、load、transform等钩子函数；1. resolveId解析模块路径，2. load返回源码，3. transform转换代码；示例插件将.demo文件转为导出固定字符串；通过buildStart、generateBundle等钩子可控制构建流程；调试可用console.log结合rollup-watch，发布时命名遵循rollup-plugin-xxx规范并支持ESM。

模块打包_rollup插件开发

开发Rollup插件并不复杂，关键在于理解其设计模式和钩子机制。Rollup本身是一个基于ES模块的打包工具，专注于将小块代码编译成大块复杂的库或应用。插件系统是其核心扩展方式，允许你在构建过程的各个阶段介入并修改行为。

理解Rollup插件的基本结构

一个Rollup插件本质上是一个对象，至少包含一个name属性和若干钩子函数（如resolveId、load、transform等）。

最简单的插件结构如下：

export default function myPlugin() {
  return {
    name: 'my-plugin',
    resolveId(id) {
      // 控制模块id如何被解析
    },
    load(id) {
      // 自定义文件加载内容
    },
    transform(code, id) {
      // 对模块代码进行转换
    }
  };
}

登录后复制

每个钩子在构建流程中特定时机被调用，你可以根据需求实现一个或多个。

常用钩子及其用途

掌握几个核心钩子能应对大多数场景：

resolveId: 决定某个导入路径对应的真实模块ID。可用于支持别名、虚拟模块或拦截特定依赖。
load: 返回某个模块的实际源码。配合resolveId可实现动态生成模块内容。
transform: 对每个模块的源码进行处理，比如语法转换、注入代码等，适合集成Babel、TypeScript等。
buildStart / buildEnd: 构建开始和结束时执行，常用于初始化资源或清理工作。
generateBundle / writeBundle: 在输出阶段操作最终产物，例如生成额外文件、压缩资源等。

动手写一个简单插件

假设我们想创建一个插件，将所有.demo文件转为返回固定字符串的模块。

45°C商城系统

系统介绍 45°C 商城系统，以 Thinkphp5.0 + Uniapp + Layui2.9 + Vue 为技术基石，精心打造出的全新 MINI 商城应用。其功能覆盖全面，无论是 PC 商城、H5 商城，还是公众号商城、微信小程序以及抖音小程序的制作都能完美胜任。采用标准系统结合插件模式开发，用户能够极为便捷地定制专属的个性模块。整个系统，从程序设计到 UI 呈现，都秉持着一贯的小而美理念。程

查看详情

export default function demoPlugin() {
  return {
    name: 'rollup-plugin-demo',
    resolveId(id) {
      if (id.endsWith('.demo')) {
        return this.getResolvedId(id, null); // 标记为已解析
      }
    },
    load(id) {
      if (id.endsWith('.demo')) {
        return 'export default "Hello from .demo file!"';
      }
    }
  };
}

登录后复制

使用时在rollup.config.js中引入即可：

import demoPlugin from './plugins/demo-plugin';

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [demoPlugin()]
};

登录后复制