本文介绍了如何使用 esbuild 插件，结合 `esbuild#define` 功能，为 JavaScript 项目同时生成多个 IIFE (Immediately Invoked Function Expression) 文件和单个 ESM (ECMAScript Module) 包。通过自定义插件移除 IIFE 构建中的 import 语句，并利用 `define` 动态切换代码行为，从而实现更干净、更小的构建输出，满足不同用户的需求。
前言
在现代 Web 开发中，同时支持传统的 IIFE 模块和现代的 ESM 模块变得越来越普遍。IIFE 适用于传统的
问题背景
假设我们有一个项目，它包含多个 IIFE 格式的文件，这些文件依赖于一个全局对象（例如 window.Slick）。我们希望保持现有的 IIFE 文件结构，以便用户可以通过
一个常见的挑战是，如何在同一份代码中，区分 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 的值来选择不同的代码执行路径。
// 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 文件可以访问全局对象。
- 在源代码中，使用三元运算符时，要注意代码的可读性和可维护性。
