使用 Esbuild 插件和 Define 实现 IIFE 和 ESM 混合打包-js教程-PHP中文网

使用 Esbuild 插件和 Define 实现 IIFE 和 ESM 混合打包

花韻仙語

发布： 2025-10-29 16:53:02

原创

546人浏览过

使用 esbuild 插件和 define 实现 iife 和 esm 混合打包

本文介绍如何使用 Esbuild 插件和 `define` 功能，针对既有 IIFE 模块又有 ESM 模块的项目，实现同时生成多个独立的 IIFE 文件和一个 ESM 打包文件的混合打包方案。通过自定义 Esbuild 插件移除 IIFE 构建中的 import 语句，并利用 `define` 功能在不同构建目标中切换代码逻辑，最终实现更简洁、更高效的打包流程。

背景

在一些老项目中，可能同时存在使用 IIFE (Immediately Invoked Function Expression) 编写的模块和使用 ESM (ECMAScript Modules) 编写的模块。IIFE 模块通常依赖全局变量，而 ESM 模块则使用 import 和 export 进行模块化。如何使用 Esbuild 同时构建这两种类型的模块，是一个值得探讨的问题。

解决方案

核心思路是利用 Esbuild 的插件机制和 define 功能，针对不同的构建目标（IIFE 和 ESM）进行定制化处理。

移除 IIFE 构建中的 import 语句： 通过自定义 Esbuild 插件，拦截 import 语句，并将其替换为空字符串。由于 IIFE 模块依赖全局变量，因此不需要 import 语句。

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；
使用 define 功能切换代码逻辑： 在代码中使用 define 定义的变量，例如 IIFE_ONLY，根据构建目标的不同，赋予不同的值。在 IIFE 构建中，IIFE_ONLY 为 true，在 ESM 构建中，IIFE_ONLY 为 false。这样，就可以根据不同的构建目标，执行不同的代码逻辑。

具体实现

1. 自定义 Esbuild 插件

以下代码展示了如何创建一个 Esbuild 插件，用于移除 IIFE 构建中的 import 语句：

const removeImportsPlugin = {
  name: 'remove-imports-plugin',
  setup(build) {
    build.onResolve({ filter: /.*/ }, (args) => {
      if (args.kind !== 'entry-point') {
        return { path: args.path + '.js', namespace: 'import-ns' }
      }
    });
    build.onLoad({ filter: /.*/, namespace: 'import-ns' }, () => ({
      contents: `// empty string, do nothing`,
      loader: 'js',
    }));
  }
};

登录后复制

这个插件包含两个部分：

onResolve: 拦截所有非入口文件的引用，并将其指向一个带有 import-ns 命名空间的虚拟文件。
onLoad: 加载 import-ns 命名空间的文件，并将其内容替换为空字符串。

2. 使用 define 功能

在代码中使用 define 定义的变量，例如 IIFE_ONLY，根据构建目标的不同，赋予不同的值。例如：

豆包爱学

豆包旗下AI学习应用

674

查看详情

// imports will be auto-dropped in iife by custom plugin
import { SlickEvent as SlickEvent_, Utils as Utils_ } from '../slick.core';

// for (iife) load `Slick` methods from global window object, or use imports for (cjs/esm)
const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
const Utils = IIFE_ONLY ? Slick.Utils : Utils_;

// ...

// then use it normally in the code...
const options = Utils.extend(true, {}, defaults, options);

登录后复制

3. 构建脚本

以下代码展示了如何使用 Esbuild 构建 IIFE 和 ESM 模块：

import { build } from 'esbuild';

/** build as iife, every file will be bundled separately */
export async function buildIifeFile(file) {
  build({
    entryPoints: [file],
    format: 'iife',
    // add Slick to global only when filename `slick.core.js` is detected
    globalName: /slick.core.js/.test(file) ? 'Slick' : undefined,
    define: { IIFE_ONLY: 'true' },
    outfile: `dist/browser/${file.replace(/.[j|t]s/, '')}.js`,
    plugins: [removeImportsPlugin],
  });
}

// bundle in ESM format into single file index.js
export function buildEsm() {
  build({
    entryPoints: ['index.js'],
    format: 'esm',
    target: 'es2020',
    treeShaking: true,
    define: { IIFE_ONLY: 'false' },
    outdir: `dist/esm`,
  });
}

登录后复制

在构建 IIFE 模块时，需要指定 format: 'iife'，并设置 define: { IIFE_ONLY: 'true' }，同时使用 removeImportsPlugin 移除 import 语句。 globalName 选项可以设置全局变量名，只有核心文件需要设置。

在构建 ESM 模块时，需要指定 format: 'esm'，并设置 define: { IIFE_ONLY: 'false' }。

示例

假设有以下代码：

// plugins/slick.cellcopymanager.js
import { SlickEvent as SlickEvent_, Utils as Utils_ } from '../slick.core';

// for (iife) load `Slick` methods from global window object, or use imports for (cjs/esm)
const SlickEvent = IIFE_ONLY ? Slick.Event : SlickEvent_;
const Utils = IIFE_ONLY ? Slick.Utils : Utils_;

function CellCopyManager() {
  // ...
}

登录后复制

构建后的 IIFE 模块代码如下：

"use strict";
(() => {
  // plugins/slick.cellcopymanager.js
  var SlickEvent = Slick.Event, Utils = Slick.Utils;
  function CellCopyManager() {
// ...

登录后复制

构建后的 ESM 模块代码如下：

// plugins/slick.cellcopymanager.js
var SlickEvent5 = SlickEvent, Utils10 = Utils;
function CellCopyManager() {
// ...

登录后复制

总结

通过使用 Esbuild 插件和 define 功能，可以轻松地实现 IIFE 和 ESM 混合打包。这种方案不仅能够生成符合不同规范的模块，还能够避免冗余代码，提高构建效率。

注意事项

在代码中使用 define 定义的变量时，需要确保变量名是唯一的，避免与其他变量冲突。
在构建脚本中，需要根据实际情况调整 Esbuild 的配置选项。
该方案适用于需要同时支持 IIFE 和 ESM 两种模块规范的项目。

以上就是使用 Esbuild 插件和 Define 实现 IIFE 和 ESM 混合打包的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

如何利用CSS-in-JS技术动态管理组件的样式与主题？如何利用CSS-in-JS技术动态地管理组件样式？如何实现一个支持主题切换的CSS-in-JS方案？如何使用新的 CSS-in-JS 库与 React Hooks 实现动态主题切换？如何利用JavaScript进行数据可视化（如使用D3.js或ECharts）？