Search code examples
javascriptbundleresbuild

how to use esbuild with plain javascript

I have two files

// index.js
// ... import some other modules ...
export function test() {
  alert("I'm using some modules");
}

and

<!-- index.html -->
<div onclick="test()">test</div>

I can "bundle" the JS

esbuild index.js --outfile=www/main.js --bundle

But how can I use test() from index.html?

Solution

  • As per the documentation:

    Specify a global name for the exports:

    esbuild index.js --outfile=www/main.js --bundle --global-name=xyz

    Then you can access it view:

    <div onclick="xyz.test()">test</div>

    However! Don't do the above!

    Intrinsic event attributes have not been considered best practise for a couple of decades and have some areas where they give unexpected behaviour.

    Use addEventListener instead.

    This will remove the need to include --global-name=xyz since you'll be using your function inside your script and not from another script elsewhere in the HTML document.