JavaScript programs start off pretty small almost every time. Not until your project grows and grows so large that your scripts may start to look like spaghetti code. At this point, your code has to be broken down into separate modules that can be imported where needed.

The good news is that modern browsers have started to support module functionality natively, and this is what this article is all about. This can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips.

Export

The first thing you do to get access to module features is export them. This is done using the export statement. The easiest way to use it is to place it in front of any items you want exported out of the module. A more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file.

You can export functions, var, let, const, and classes. They need to be top-level items; you can’t use export inside a function

class User{
    //private fields are declared with #
    #name;
    constructor(name) {
        this.name = name;
    }

    getName(){
        return this.name;
    }

}

function sayHi(name) {
    return `Hello, ${name}!`;
}

let folau = {

    name: "Folau",

    getName(){
        return this.name;
    }
}

/**
 * export class User {...} -> import {User} from ..
 * export default class User {...} -> import User from ...
 */
// export has to be in the same order as import
// Named exports are explicit. They exactly name what they import, so we have that information from them; that’s a good thing.
export {User, sayHi, folau};

Import

Once you’ve exported some features out of your module, you need to import them into your script to be able to use them.

You use the import statement, followed by a comma-separated list of the features you want to import wrapped in curly braces, followed by the keyword from, followed by the path to the module file — a path relative to the site root. we are using the dot (.) syntax to mean “the current location”, followed by the path beyond that to the file we are trying to find. This is much better than writing out the entire relative path each time, as it is shorter, and it makes the URL portable — the example will still work if you move it to a different location in the site hierarchy.

<script type="module">
    // import has to be in the same order as export
    // Named exports are explicit. They exactly name what they import, so we have that information from them; that’s a good thing.
    import {User, sayHi, folau} from './module.js';

    console.log("Module");
   
    let greeting = sayHi("Folau");

    console.log(greeting);// Hello, Folau

    console.log("name: ", folau.getName());// Folau

    let lisa = new User("Lisa");
    console.log("name: ", lisa.getName());// Lisa
</script>

Source code on Github