This:
<script type="module">
import "./js/jquery.js";
window.console.log(window.$);
</script>
creates jQuery on window as “side effect”. JQuery code
( function( global, factory ) {
"use strict";
if (typeof module === "object" && typeof module.exports === "object") {
// ...
} else {
// we are there when loading as ES6 native module
factory( global );
}
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
// ... jquery code
});
There is some specific in this and the same behaviour can’t be expected from all “legacy” scripts.
What is interesting next also works (my explaination: because of “fetching first rule”)
<script type="module">
window.console.log(window.$); // also works and will return $ function even if import is declared bellow
import "./js/jquery.js";
</script>
Syntax import "module-name"
described there
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Google article: https://developers.google.com/web/fundamentals/primers/modules
Also this loads jquery ONLY ONCE (and execute it ONLY ONCE):
<script type="module">
import("./js/jquery.js").then(
function(){
window.console.log("inline 2a = " + window.$);
}
);
</script>
<script type="module">
import("./js/jquery.js").then(
function(){
window.console.log("inline 2b = " + window.$);
}
);
</script>
This is important feature that can be used in development.
P.S.
This works also but has its trap:
<script type="module">
import * as jQuery from "./js/jquery.js"
window.console.log(jQuery); // returns Module
window.console.log(window.jQuery); // returns jQuery function
</script type="module">
solved how to get `jQuery` as a function (not as a Module symbol) after ES6 style `import * as jQuery from “./js/jquery.js”;`