使用 esbuild 加载 bootstrap JS

Question

我正在尝试导入 bootstrap JS 在我的 esbuild 构建中：

// index.js
import 'jquery-import'
import 'bootstrap'

// jquery-import.js
import jquery from 'jquery'
window.jQuery = window.$ = jquery;

构建目标是 esm。问题是运行以下引导代码：

factory(exports, require('jquery'), require('popper.js'));

这不使用我的全局 window.jQuery 而是需要它自己的，这意味着我的全局 window.$.fn不包括 Bootstrap 扩展。另外，我认为这会使 jQuery 加载两次。

有没有办法在不调整引导源代码的情况下解决这个问题？

---

更多背景知识：

引导程序源代码以以下语句开头（为了更好的可读性而稍微调整）：

(function (global, factory) {
  if (typeof exports === 'object' && typeof module !== 'undefined') {
    // Option 1: The route taken by esbuild
    factory(exports, require('jquery'), require('popper.js'));
  } else if (typeof define === 'function' && define.amd) {
    // Option 2
    define(['exports', 'jquery', 'popper.js'], factory);
  } else {
    // Option 2
    (global = global || self, factory(global.bootstrap = {}, global.jQuery, global.Popper));
  }
}(this, function (exports, $, Popper) { 'use strict';

我尝试注释掉各个选项，并且 1、2 或 3 都不能通过仅采用已经全局定义的 来工作window.jQuery。

非常感谢您的帮助！

Answer 1

它不起作用的原因是由于某种原因您的 esbuild 正在尝试导入 UMD 文件（通常用于旧的 Node 和浏览器混合代码）。

查看 bootstrap 的 package.json 后，似乎 "module": "dist/js/bootstrap.js" 将 bootstrap 导出为模块，这可能是 esbuild 应该引用的内容。

因此，要在不修复 esbuild 配置的情况下修复此问题，我猜想您可以尝试：

import 'bootstrap/dist/js/bootstrap'

...或者使用 esbuild 配置修复它，添加以下内容：

const buildOpts = {
  mainFields: ['module', 'main'],
}

此设置告诉捆绑器优先考虑模块，然后是主要入口点。

通常这是 main 之前的模块，但也可能相反，因为您设置了 platform到“节点”。