Module

Introduction

As our application grows bigger, we want to split it into multiple files, so called “modules”. A module may contain a class or a library of functions for a specific purpose.
But eventually scripts became more and more complex, so the community invented a variety of ways to organize code into modules, special libraries to load modules on demand.

AMD (Asynchronous Module Definition)

It is invented by RequireJS
Here is an example

// Define moduleA using AMD
define(function() {
    // Module implementation
    return {
        sayHello: function() {
            console.log("Hello from moduleA!");
        }
    };
});

// Load moduleA and use it
require(['moduleA'], function(moduleA) {
    moduleA.sayHello();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AMD Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</head>
<body>
    <h1>AMD Example</h1>

    <script>
        // Configure RequireJS
        require.config({
            baseUrl: '.',
            paths: {
                'moduleA': 'moduleA',
            }
        });

        // Load main.js to start the application
        require(['main']);
    </script>
</body>
</html>

CommonJS

It is mainly designed for NodeJS usage
By default, NodeJS treats JavaScript code as CommonJS modules. Because of this, CommonJS modules are characterized by the require statement for module imports and module.exports for module exports.

module.exports.a = "a";

module.exports = "b"

const {a} = require("./a");
const b = require("./n");
console.log(a ,b); // a , b

ECMAScript 6 (ES6)

After javascript comes to version 6, import & export is added
Most of browser support es6, however, NodeJS default is using commonJS
In order to apply es6 on nodejs, it is recommended to use typescript for development, and compile in commonjs

import {a} from "./a";
console.log("123",a);

export const a = 'A';

After compiling into javascript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var a_1 = require("./a");
console.log("123", a_1.a);

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.a = void 0;
exports.a = 'A';

Syntax

Given the view1 module

import view1 from './view1.js';

would basically be equivalent to

import * as temp from './view1.js';
const view1 = temp.default;

In fact the first import above a shorthand for

import { default as view1 } from './view1.js';

ESNext

Targeting ESNext enables module system using the next version of JavaScript is, meaning it includes the latest proposals and features that may not be finalized yet.

References

Modules, introductioniliakan

PreviousScript Async vs Defer NextConst VS Let VS Var

Last updated 6 months ago

Was this helpful?