使用 esbuild 混合插件为多个文件生成 IIFE 和单个 ESM 包-js教程-PHP中文网

使用 esbuild 混合插件为多个文件生成 IIFE 和单个 ESM 包

霞舞

发布： 2025-10-29 12:40:37

原创

790人浏览过

使用 esbuild 混合插件为多个文件生成 iife 和单个 esm 包

本文介绍了如何使用 esbuild 插件，结合 `esbuild#define` 功能，为 JavaScript 项目同时生成多个 IIFE (Immediately Invoked Function Expression) 文件和单个 ESM (ECMAScript Module) 包。通过自定义插件移除 IIFE 构建中的 import 语句，并利用 `define` 动态切换代码行为，从而实现更干净、更小的构建输出，满足不同用户的需求。

前言

在现代 Web 开发中，同时支持传统的 IIFE 模块和现代的 ESM 模块变得越来越普遍。IIFE 适用于传统的 <script> 标签引入方式，而 ESM 则更适合模块化开发和现代构建工具。本文将介绍如何使用 esbuild 及其插件机制，以及 esbuild#define 功能，高效地构建这两种模块格式。

问题背景

假设我们有一个项目，它包含多个 IIFE 格式的文件，这些文件依赖于一个全局对象（例如 window.Slick）。我们希望保持现有的 IIFE 文件结构，以便用户可以通过 <script> 标签引入特定的功能模块。同时，我们也希望提供一个 ESM 包，方便用户在现代项目中使用。

一个常见的挑战是，如何在同一份代码中，区分 IIFE 和 ESM 的构建逻辑，避免引入不必要的代码。

解决方案

核心思路是使用 esbuild 插件来处理 IIFE 构建中的 import 语句，并利用 esbuild#define 在构建时动态替换代码。

1. 创建一个 esbuild 插件

该插件的主要作用是在 IIFE 构建中移除所有的 import 语句。

import { build } from 'esbuild';

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 拦截所有非入口文件的导入请求，并将其重定向到一个自定义的 namespace。然后，onLoad 钩子会加载这个 namespace 中的文件，并返回一个空的 JavaScript 代码块，从而有效地移除了 import 语句。

2. 使用 esbuild#define 定义构建标志

esbuild#define 允许我们在构建时定义全局变量，从而在代码中根据不同的构建目标执行不同的逻辑。

在 IIFE 构建中，我们定义 IIFE_ONLY 为 'true'，而在 ESM 构建中，我们定义为 'false'。

/** 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`,
  });
}

登录后复制

3. 修改源代码

在源代码中，我们使用三元运算符，根据 IIFE_ONLY 的值来选择不同的代码执行路径。

AI帮个忙

多功能AI小工具，帮你快速生成周报、日报、邮、简历等

查看详情

// 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);

登录后复制

当 IIFE_ONLY 为 true 时，从全局对象 Slick 中获取变量；否则，使用 import 语句导入的变量。

4. 构建

分别执行 buildIifeFile 和 buildEsm 函数，即可生成 IIFE 文件和 ESM 包。

示例

假设我们有一个名为 slick.cellcopymanager.js 的文件，其内容如下：

// 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() {
  // ...
}

export default 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() {
// ...

登录后复制

可以看到，IIFE 文件中移除了 import 语句，并使用了全局对象 Slick，而 ESM 包则保留了 import 语句。

总结

通过 esbuild 插件和 esbuild#define，我们可以轻松地为 JavaScript 项目同时生成 IIFE 文件和 ESM 包。这种方法可以有效地减少代码冗余，提高构建效率，并为用户提供更灵活的使用方式。

注意事项：

esbuild#define 只能替换字符串字面量，因此需要将布尔值写成字符串形式（'true' 或 'false'）。
确保正确配置 globalName，以便 IIFE 文件可以访问全局对象。
在源代码中，使用三元运算符时，要注意代码的可读性和可维护性。

以上就是使用 esbuild 混合插件为多个文件生成 IIFE 和单个 ESM 包的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript 回调函数：理解回调地狱与解决方案 JavaScript代码质量检测与静态分析工具使用JavaScript实现一个简单的编译器_js高级应用使用JavaScript实现一个简单的评分组件_javascript UI组件使用JavaScript正则表达式验证DFA字符串