Wednesday, 26 September 2018

JavaScript modules, export and import

Let's consider web app project root directory which contains the following files:

scripts/common.js
scripts/array_demo.js
views/array_demo.html


Without modules:


scripts/common.js:

function clearElement(id) {...}
function log(text) {...}

scripts/array_demo.js:

function foo() {
    clearElement(...);
    log(...);
};

In HTML file scripts have to be added in order so functions, objects, or primitive values from previously included scripts are visible in scripts that use them:

views/array_demo.html:

         ...
         <script src='/scripts/common.js'></script>
         <script src='/scripts/array_demo.js'></script>
     </body>
 </html>

This can be a problem in case when there are many and/or complex dependencies. The solution is using ECMAScript modules. This will work in HTML5-compliant browsers.


With modules:


What is the difference between a common (classic) JavaScript script and a module?


A classic script is just a standard JavaScript script as you know it. A module script is one that contains an ES6 module, i.e. it uses (or: can use) import and export declarations. [source]

scripts/common.js:

function clearElement(id) {...}
function log(text) {...}

export {
    clearElement,
    log
};

scripts/array_demo.js:

import { clearElement, log} from './common.js';

function foo() {
    clearElement(...);
    log(...);
};

views/array_demo.html:

         ...
         <script type="module" src='/scripts/array_demo.js'></script>
     </body>
 </html>


export and import statements are defined in ECMAScript 2015 (6th Edition, ECMA-262).

module script type is available only in HTML5-compliant browsers [source].

Modules VS Require.JS


Require.JS "modularizes" JS scripts and basically emulates import/export functionality. With ES6 modules available there is no need to use Require.JS.

Further reading:


ECMAScript modules in browsers
ES6 In Depth: Modules
HTML/Element/script (MDN)
ECMAScript 6 modules: the final syntax
export (MDN)
import (MDN)
CommonJS vs AMD vs RequireJS vs ES6 Modules

1 comment:

micheal pan said...

BE SMART AND BECOME RICH IN LESS THAN 3DAYS....It all depends on how fast 
you can be to get the new PROGRAMMED blank ATM card that is capable of
hacking into any ATM machine,anywhere in the world. I got to know about 
this BLANK ATM CARD when I was searching for job online about a month 
ago..It has really changed my life for good and now I can say I'm rich and 
I can never be poor again. The least money I get in a day with it is about 
$50,000.(fifty thousand USD) Every now and then I keeping pumping money 
into my account. Though is illegal,there is no risk of being caught 
,because it has been programmed in such a way that it is not traceable,it 
also has a technique that makes it impossible for the CCTVs to detect 
you..For details on how to get yours today, email the hackers on : (
atmmachinehackers1@gmail.com ). Tell your 
loved once too, and start to live large. That's the simple testimony of how 
my life changed for good...Love you all ...the email address again is ;
atmmachinehackers1@gmail.com