Estoy probando reemplazar Webpack 5 con esbuild. ¿Cómo se exportan globales en un paquete? Tengo una sola dependencia, jQuery, pero tendré más en el futuro. Mi script esbuild es:
// build.js const esbuild = require('esbuild'); esbuild .build({ bundle: true, entryNames: "[dir]/[name].[hash]", entryPoints: { libs: "src/libs.js", }, outbase: "src", outdir: "dist", platform: 'browser', }) .catch(() => process.exit(1)); Y el libs.js que indica dependencias para agrupar es:
// src/libs.js import 'jquery'; Y aquí está mi package.json :
{ // ... "dependencies": { "jquery": "~3.6.0" }, "devDependencies": { "esbuild": "^0.14.23" }, // ... } Ejecutar el script de compilación empaquetará correctamente jQuery en dist/libs.{hash}.js , pero incluirlo en una página web a través de una etiqueta de script no expone window.$ ni window.jQuery . ¿Cómo puedo obtener estos para exportar?
En Webpack 5, usaría expose-loader para lograr esto:
module.exports = { module: { rules: [ { test: require.resolve('jquery'), loader: 'expose-loader', options: {exposes: ["$", "jQuery"]}, }, ], }, };Para que esto funcione con esbuild, debe importar un objeto del módulo y configurar el objeto en la window . P.ej,
// Import module. import * as module from 'module'; // Export module on window. window.module = module; jQuery exporta el objeto jQuery como el valor predeterminado. Para exportarlo como global tienes que hacer:
// Import jQuery. import {default as jQuery} from 'jquery'; // Which can be shortened to. import jQuery from 'jquery'; // Then export jQuery. window.$ = jQuery; window.jQuery = jQuery;