Estoy tratando de importar el arranque JS en mi compilación esbuild:
// index.js import 'jquery-import' import 'bootstrap' // jquery-import.js import jquery from 'jquery' window.jQuery = window.$ = jquery; El objetivo de compilación es esm . El problema es que se ejecuta el siguiente código de arranque:
factory(exports, require('jquery'), require('popper.js')); Esto no usa mi window.jQuery global, sino que requiere el suyo propio, lo que significa que mi window.$.fn global no incluye las extensiones de Bootstrap. Además, creo que esto hace que jQuery se cargue dos veces.
¿Hay alguna forma de arreglar esto sin adaptar el código fuente de arranque?
Un poco más de antecedentes sobre esto:
El código fuente de arranque comienza con las siguientes declaraciones (ligeramente adaptadas para una mejor legibilidad):
(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'; He intentado comentar opciones individuales, y ni 1, 2 o 3 funcionan simplemente tomando el window.jQuery ya definido globalmente.
¡Muchas gracias por su ayuda!
La razón por la que no funciona es que, por alguna razón, su esbuild está tratando de importar un archivo UMD (generalmente utilizado para código híbrido antiguo de nodo y navegador).
Habiendo mirado el paquete.json de bootstrap, parece que "module": "dist/js/bootstrap.js" , que exporta bootstrap como módulos, que es probablemente a lo que debería estar haciendo referencia esbuild.
Entonces, para solucionar esto sin arreglar la configuración de esbuild, conjeturaría que podría intentar:
import 'bootstrap/dist/js/bootstrap'... o para solucionarlo con la configuración de esbuild, agregue esto:
const buildOpts = { mainFields: ['module', 'main'], }Esta configuración le dice al empaquetador que priorice el módulo, luego los puntos de entrada principales.
Normalmente, este es el módulo antes que el principal, pero puede ser al revés porque configura la plataforma en "nodo".