如何分离 IIFE 文件并构建单个 ESM 捆绑包？

2024-03-28 07:51:11

多文件捆绑包：分离 IIFE，构建单个 ESM 捆绑包

背景

SlickGrid 项目中包含大量以 IIFE（立即调用函数表达式）形式编写的文件。为了满足用户对独立 <script> 加载和 ESM（ECMAScript 模块）捆绑包的需求，我们需要一种方法来分离这些 IIFE 文件，同时在 ESM 构建中提供单个文件捆绑包。

解决方案

定制 esbuild 插件

我们编写了一个 esbuild 插件来处理 onResolve 事件，该插件将识别 IIFE 文件并使用 window.Slick 对象加载代码。对于 ESM 使用，它将使用命名导入。

插件实现

我们编写了一个定制的 esbuild 插件 myPlugin，它在 onResolve 阶段劫持对 IIFE 文件的解析，并返回一个带有 .js 扩展名的新路径，以指示 esbuild 使用 IIFE 形式加载该文件。它还为这些 IIFE 文件设置了 "import-ns" 命名空间，以防止它们与 ESM 导入发生冲突。

在 onLoad 阶段，myPlugin 会拦截来自 IIFE 文件的加载请求，并返回一个内容为空字符串的对象，以指示 esbuild 跳过对这些文件的实际加载。

使用插件

我们可以使用这个插件来构建 IIFE 捆绑包：

build({
  entryPoints: ['slick.grid.js'],
  color: true,
  bundle: true,
  minify: false,
  target: 'es2015',
  sourcemap: false,
  logLevel: 'error',
  format: 'iife',
  outfile: 'dist/iife/slick.grid.js',
  plugins: [myPlugin],
});

对于 ESM 捆绑包，我们可以省略插件：

build({
  entryPoints: ['slick.grid.js'],
  color: true,
  bundle: true,
  minify: false,
  target: 'es2015',
  sourcemap: false,
  logLevel: 'error',
  format: 'esm',
  outfile: 'dist/esm/slick.grid.js',
});