How do you export globals in a bundle with esbuild?

user_369450 0
Viewed 682

I'm testing replacing Webpack 5 with esbuild. How do you export globals in a bundle? I have a single dependency, jQuery, but I will have more in the future. My esbuild script is:

// 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));

And the libs.js that indicates dependencies to bundle is:

// src/libs.js
import 'jquery';

And here's my package.json:

{
    // ...
    "dependencies": {
        "jquery": "~3.6.0"
    },
    "devDependencies": {
        "esbuild": "^0.14.23"
    },
    // ...
}

Running the build script will properly bundle jQuery in dist/libs.{hash}.js but including this in a webpage via a script tag exposes neither window.$ nor window.jQuery. How do I get these to export?

In Webpack 5, I would use expose-loader to achieve this:

module.exports = {
    module: {
        rules: [
            {
                test: require.resolve('jquery'),
                loader: 'expose-loader',
                options: {exposes: ["$", "jQuery"]},
            },
        ],
    },
};
esbuild browser javascript
1 Answers

In order to get this to work with esbuild, you have to import an object from the module, and set the object on window. E.g.,

// Import module.
import * as module from 'module';

// Export module on window.
window.module = module;

jQuery exports the jQuery object as the default value. To export it as a global you have to do:

// 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;
user_3694500
Related