本文介绍了如何使用 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 的值来选择不同的代码执行路径。
// 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 文件可以访问全局对象。
- 在源代码中，使用三元运算符时，要注意代码的可读性和可维护性。