本文介绍如何使用 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 语句。
使用 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，根据构建目标的不同，赋予不同的值。例如：
// 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 两种模块规范的项目。
