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

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

本文介绍如何使用 esbuild 插件和 `define` 特性，为 J*aScript 项目同时生成 IIFE (Immediately Invoked Function Expression) 和 ESM (ECMAScript Module) 两种格式的包。通过自定义插件移除 IIFE 构建中的 imports，并利用 `define` 标志在代码中区分不同构建环境，最终实现代码的按需引入和精简输出，从而优化构建产物的大小和性能。

背景

在开发 J*aScript 库或框架时，通常需要支持多种模块化格式，以满足不同用户的需求。例如，一些用户可能仍然喜欢使用传统的 <script> 标签引入 IIFE 格式的包，而另一些用户则更倾向于使用 ESM 格式的包，以便利用现代 J*aScript 的特性，如 tree shaking。</script>

本文将以 SlickGrid 项目为例，介绍如何使用 esbuild 插件和 define 特性，同时生成 IIFE 和 ESM 两种格式的包，并确保每种格式的包都只包含必要的代码，从而优化构建产物的大小和性能。

解决方案

该解决方案的核心在于使用 esbuild 插件来处理 IIFE 构建中的 imports，并使用 define 特性在代码中区分不同的构建环境。

1. 自定义 esbuild 插件移除 Imports

首先，我们需要创建一个 esbuild 插件，用于在 IIFE 构建中移除所有的 import 语句。这是因为 IIFE 格式的包通常依赖于全局变量，而不是模块导入。

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 和 onLoad 钩子。onResolve 钩子拦截所有非入口文件的导入请求，并将其重定向到 import-ns 命名空间。onLoad 钩子则拦截 import-ns 命名空间下的所有文件加载请求，并返回一个空字符串，从而有效地移除了所有的 import 语句。

2. 使用 define 特性区分构建环境

接下来，我们需要使用 esbuild 的 define 特性，在代码中定义一个全局变量，用于区分 IIFE 和 ESM 构建环境。

Jaaz

开源的AI设计智能体

216 查看详情 Jaaz

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

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

3. 在代码中使用 IIFE_ONLY 变量

现在，我们可以在代码中使用 IIFE_ONLY 变量来区分不同的构建环境。例如：

// 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 构建中，IIFE_ONLY 为 'true'，因此 SlickEvent 和 Utils 将从全局 Slick 对象中获取。而在 ESM 构建中，IIFE_ONLY 为 'false'，因此 SlickEvent 和 Utils 将从 import 语句中获取。

示例

以下是一个完整的示例，展示如何使用 esbuild 插件和 define 特性同时生成 IIFE 和 ESM 格式的包：

// esbuild.config.js
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',
      }));
    }
};

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

// index.js
// 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);

总结

通过使用 esbuild 插件和 define 特性，我们可以轻松地为 J*aScript 项目同时生成 IIFE 和 ESM 两种格式的包，并确保每种格式的包都只包含必要的代码。这可以显著减小构建产物的大小，并提高应用程序的性能。

注意事项：

define 特性会将字符串值视为 J*aScript 代码，因此需要确保字符串值的格式正确。
在 IIFE 构建中，需要确保所有的依赖项都已通过 <script> 标签加载到全局环境中。</script>
可以根据实际需求调整插件和 define 特性的配置。

希望本文能够帮助你更好地理解如何使用 esbuild 同时生成 IIFE 和 ESM 格式的包。

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

# 都只 # 稷山SEO推广 # 罗湖有什么网站推广 # 苏州seo推广网站 # seo优化针对的人群 # 顺德页面seo优化价格 # 咸阳品牌网站建设 # 黔江网站建设费用 # 宜昌本地智能营销推广是什么 # 全网营销外包推广效果 # 新手要多久上手seo # 中特 # javascript # 自定义 # 我们可以 # 而在 # 全局变量 # 移除 # 两种 # 如何使用 # 多个 # win # js # java

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-10-29

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。