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.