Preact WMR 插件 API 深度解析

巫文钧Jill

于 2025-06-08 09:18:13 发布

阅读量657

点赞数 12

本文链接：https://blog.csdn.net/gitblog_00386/article/details/148508209

版权

Preact WMR 插件 API 深度解析

wmr 👩‍🚀 The tiny all-in-one development tool for modern web apps. 项目地址: https://gitcode.com/gh_mirrors/wm/wmr

前言

Preact WMR 是一个轻量级的现代前端构建工具，其插件系统是其强大功能的核心所在。本文将深入剖析 WMR 的插件 API，帮助开发者理解如何创建自定义插件来扩展 WMR 的功能。

插件基础概念

WMR 的插件系统基于 Rollup 插件架构，并在此基础上进行了扩展。插件本质上是一个 JavaScript 对象，包含一系列生命周期钩子函数，这些钩子会在构建过程的不同阶段被调用。

核心插件属性

插件名称 (name)

每个插件必须定义一个名称，这个名称会在日志、警告和错误信息中显示，方便开发者识别插件来源。

const myPlugin = {
  name: 'my-awesome-plugin'
};

执行顺序控制 (enforce)

WMR 提供了精细的插件执行顺序控制，通过 enforce 属性可以指定插件的执行时机：

pre: 最先执行
normal: 普通顺序（默认）
post: 最后执行

执行顺序如下：

enforce: "pre" 的插件
普通插件（无 enforce 或 enforce: "normal"）
WMR 内置插件
enforce: "post" 的插件

核心插件方法

配置修改 (config)

config 钩子允许插件修改 WMR 的配置对象。例如设置别名：

{
  config(config) {
    return {
      alias: {
        '@components': '/src/components'
      }
    };
  }
}

配置解析完成 (configResolved)

当所有配置合并完成后，会触发 configResolved 钩子。这个钩子常用于根据最终配置决定插件行为：

{
  configResolved(config) {
    this.isProduction = config.mode === 'build';
  },
  transform(code) {
    if (this.isProduction) {
      // 生产环境特定处理
    }
  }
}

模块解析 (resolveId)

resolveId 负责处理模块路径解析，是插件系统的核心功能之一：

{
  resolveId(id, importer) {
    if (id === 'virtual-module') {
      // 返回解析后的路径
      return id;
    }
    // 返回 null 表示继续由其他插件处理
    return null;
  }
}

高级用法示例 - 递归解析：

{
  async resolveId(id, importer) {
    if (id.startsWith('@lib/')) {
      const resolved = await this.resolve(
        id.replace('@lib/', 'lib/'),
        importer,
        { skipSelf: true }
      );
      return resolved;
    }
  }
}

模块加载 (load)

load 方法用于加载模块内容，特别是对虚拟模块的处理：

{
  load(id) {
    if (id === 'virtual-module') {
      return `export const message = "Hello from virtual module!"`;
    }
  }
}

代码转换 (transform)

transform 钩子用于对模块内容进行转换，支持返回源码和 sourcemap：

{
  transform(code, id) {
    if (id.endsWith('.custom')) {
      const transformed = babelTransform(code);
      return {
        code: transformed.code,
        map: transformed.map
      };
    }
  }
}