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

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

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

前言

在现代 Web 开发中，同时支持传统的 IIFE 模块和现代的 ESM 模块变得越来越普遍。IIFE 适用于传统的 <script> 标签引入方式，而 ESM 则更适合模块化开发和现代构建<a style="color:#f60; text-decoration:underline;" title= "工具"href="https://www.php.cn/zt/16887.html" target="_blank">工具。本文将介绍如何使用 esbuild 及其插件机制，以及 esbuild#define 功能，高效地构建这两种模块格式。</script>

问题背景

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

一个常见的挑战是，如何在同一份代码中，区分 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 中的文件，并返回一个空的 J*aScript 代码块，从而有效地移除了 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: 'es2025',
    treeShaking: true,
    define: { IIFE_ONLY: 'false' },
    outdir: `dist/esm`,
  });
}

3. 修改源代码

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

SeoShop

SeoShop网店系统全站纯静态html生成更符合搜索引擎优化，并修改了以前许多js代码，取消了连接地址的js代码更换为纯div+css格式，并且所有文件可自定义url和文件名，自定义内部连接，自定义外部连接，等多个符合SEO搜索引擎优化的设置，让您的网店更容易让搜索引擎收录. 简单易用极速网店真正做到以人为本、以用户体验为中心，能使您快速搭建网上购物网站。后台管理操作简单，一目了然，没有夹杂多

0 查看详情 SeoShop

// 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，我们可以轻松地为 J*aScript 项目同时生成 IIFE 文件和 ESM 包。这种方法可以有效地减少代码冗余，提高构建效率，并为用户提供更灵活的使用方式。

注意事项：

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

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

# 而在 # 苏州做企业网站建设 # 惠东培训学校网站建设 # 北辰网站推广热线电话 # CG自学网站建设工作 # 昆明搜索关键词排名品牌 # 独立站卖家需要seo吗 # 旅游产品营销与推广方案 # 小红书怎么关键词排名 # 网站建设培训会 # 慈溪网络推广营销培训班 # 有效地 # 全局变量 # javascript # 源代码 # 网店 # 移除 # 如何使用 # 运算符 # 自定义 # 多个 # win # 工具 # js # java

返回目录在线咨询

上一篇：J*aScript DOM操作：动态更新列表并避免重复渲染
下一篇：HTML单列键值对数据展示：语义化与可访问性指南

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商