I'm working on a webpage has js files that don't provide esm exports, and they define global variables that other files depend on. Something like this:
<!-- index.html -->
...
<script src="first.js"></script>
<script src="second.js"></script>
...
/* first.js */
var someGlobalVariable = 'value';
/* second.js */
function anImportantFunc() {
doSomethingWith(someGlobalVariable);
}
...
anImportantFunc();
The webpage does not use any UI framework.
I'm trying to minify these js files but the minifier understandably changes the names of the global variables without updating the other files that depend on them, so those other files throw errors when they hit undefined variables. Is there a way to make the minifier aware of this, possibly by specifying variables to ignore in some/all files? Similar to how eslint allows you to specify globals that shouldn't be marked as undefined. I understand this may be difficult because the files don't have clear dependency tree relationships in the way that modules have. I'm using esbuild but open to other build tools if they handle this scenario well. Thanks.