用esbuild加载引导JS

Question

我正试图在esbuild构建中导入引导JS：

// 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不包括引导扩展。而且，我认为这会使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文件(通常用于旧节点和浏览器混合代码)。

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

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

import 'bootstrap/dist/js/bootstrap'

若要使用esbuild修复...or，请添加以下内容：

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

此设置告诉绑定程序优先排序模块，然后是主入口点。

通常，这是main之前的模块，但它可能是相反的，因为您将平台设置为“节点”。