javascript - 使用 esbuild 加载引导 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';

我已经尝试注释掉单个选项，并且仅使用已经全局定义的 window.jQuery 1、2 或 3 都不起作用.
非常感谢您的帮助!

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到“Node ”。