ECMA Script Modules and Module Loading in the Browser

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: