Про модули в JavaScript

Всю информация о развития модулей описана в хорошей статье эволюция модульного JavaScript на хабре.

В repl rollup.js результат обработки исходного кода в разные модульные системы:

main.js - entrypoint

import { cube } from './maths.js';

console.log( cube( 5 ) ); // 125

maths.js

// This function isn't used anywhere, so
// Rollup excludes it from the bundle...
export function square ( x ) {
    return x * x;
}

// This function gets included
export function cube ( x ) {
    // rewrite this as `square( x ) * x`
    // and see what happens!
    return x * x * x;
}

ES

// maths.js

// This function gets included
function cube ( x ) {
    // rewrite this as `square( x ) * x`
    // and see what happens!
    return x * x * x;
}

/* TREE-SHAKING */

console.log( cube( 5 ) ); // 125

AMD

define(function () { 'use strict';

    // maths.js

    // This function gets included
    function cube ( x ) {
        // rewrite this as `square( x ) * x`
        // and see what happens!
        return x * x * x;
    }

    /* TREE-SHAKING */

    console.log( cube( 5 ) ); // 125

});

CJS

'use strict';

// maths.js

// This function gets included
function cube ( x ) {
    // rewrite this as `square( x ) * x`
    // and see what happens!
    return x * x * x;
}

/* TREE-SHAKING */

console.log( cube( 5 ) ); // 125

IIFE

(function () {
    'use strict';

    // maths.js

    // This function gets included
    function cube ( x ) {
        // rewrite this as `square( x ) * x`
        // and see what happens!
        return x * x * x;
    }

    /* TREE-SHAKING */

    console.log( cube( 5 ) ); // 125

}());

UMD

(function (factory) {
    typeof define === 'function' && define.amd ? define(factory) :
    factory();
}((function () { 'use strict';

    // maths.js

    // This function gets included
    function cube ( x ) {
        // rewrite this as `square( x ) * x`
        // and see what happens!
        return x * x * x;
    }

    /* TREE-SHAKING */

    console.log( cube( 5 ) ); // 125

})));

System

System.register('myBundle', [], function () {
    'use strict';
    return {
        execute: function () {

            // maths.js

            // This function gets included
            function cube ( x ) {
                // rewrite this as `square( x ) * x`
                // and see what happens!
                return x * x * x;
            }

            /* TREE-SHAKING */

            console.log( cube( 5 ) ); // 125

        }
    };
});

Похожие записи

Axios или fetch

Сравнение на примере GET/POST запросов, обработке ошибок и возможности задавать базовую конфигурацию.

Добавить css link и js script динамически

const link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css';
link.integrity = 'sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO'; // необязательно
link.crossOrigin = 'anonymous'; // необязательно
document.head.appendChild(link);

const script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
script.integrity = 'sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo'; // необязательно
s...