index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modules Demo</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
crossorigin="anonymous"></script>
<script type="module" src="index.js"></script>
<script type="module" src="logger.js"></script>
<script type="module" src="foo.js"></script>
</head>
<body>
</body>
</html>
index.js
import foo from "./foo.js"
import log from "./logger.js";
$(() => {
log("Hello from index.js");
foo.greetings();
foo.valediction();
});
logger.js
export default (text) => {
$("body").append(`<p>${text}</p>`);
}
foo.js
import log from "./logger.js";
$(() => {
log("Hello from foo.js");
});
let greetings = () => log("Greetings from foo.js");
export default {
greetings,
valediction: () => log("Goodbye from foo.js"),
};
Sources: