本文介绍了如何使用 esbuild 插件，结合 `esbuild#define` 功能，为 JavaScript 项目同时生成多个 IIFE (Immediately Invoked Function Expression) 文件和单个 ESM (ECMAScript Module) 包。通过自定义插件移除 IIFE 构建中的 import 语句，并利用 `define` 动态切换代码行为，从而实现更干净、更小的构建输出，满足不同用户的需求。
前言
在现代 Web 开发中，同时支持传统的 IIFE 模块和现代的 ESM 模块变得越来越普遍。IIFE 适用于传统的 标签引入方式，而 ESM 则更适合模块化开发和现代构建工具。本文将介绍如何使用 esbuild 及其插件机制，以及 esbuild#define 功能，高效地构建这两种模块格式。
问题背景
假设我们有一个项目，它包含多个 IIFE 格式的文件，这些文件依赖于一个全局对象（例如 window.Slick）。我们希望保持现有的 IIFE 文件结构，以便用户可以通过 标签引入特定的功能模块。同时，我们也希望提供一个 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.jsexport function buildEsm() { build({ entryPoints: ['index.js'], format: 'esm', target: 'es2020', treeShaking: true, define: { IIFE_ONLY: 'false' }, outdir: `dist/esm`, });}
3. 修改源代码
在源代码中，我们使用三元运算符，根据 IIFE_ONLY 的值来选择不同的代码执行路径。
AI帮个忙
多功能AI小工具，帮你快速生成周报、日报、邮、简历等
55 查看详情
// imports will be auto-dropped in iife by custom pluginimport { 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.jsimport { 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.jsvar SlickEvent5 = SlickEvent, Utils10 = Utils;function CellCopyManager() {// ...
可以看到，IIFE 文件中移除了 import 语句，并使用了全局对象 Slick，而 ESM 包则保留了 import 语句。
总结
通过 esbuild 插件和 esbuild#define，我们可以轻松地为 JavaScript 项目同时生成 IIFE 文件和 ESM 包。这种方法可以有效地减少代码冗余，提高构建效率，并为用户提供更灵活的使用方式。
注意事项：
esbuild#define 只能替换字符串字面量，因此需要将布尔值写成字符串形式（’true’ 或 ‘false’）。确保正确配置 globalName，以便 IIFE 文件可以访问全局对象。在源代码中，使用三元运算符时，要注意代码的可读性和可维护性。
以上就是使用 esbuild 混合插件为多个文件生成 IIFE 和单个 ESM 包的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/312094.html
微信扫一扫 
支付宝扫一扫 
