Modules in ES6

maaajo — Sun, 19 May 2019 10:48:34 +0000

Modules in ES6:

JavaScript has had modules for a long time but they were implemented using external libraries. ES6 (ECMAScript 2015) introduced native support for modules.

Below you can find a quick guide on how to use import/export in ES6

Clause export

// file exportModule.js

function testFunction(param) {
    console.log(param)
};

class TestClass {
    constructor() {
        this.name = test;
    }
};

export { testFunction, TestClass }

Import all clause exports:

// file app.js

// importing all
import { testFunction, TestClass } from '/.exportModule'

testFunction('Imported with success!');

Import selected clause exports:

// file app.js

// importing only selected
import { TestClass } from '/.exportModule'

const importedClass = new TestClass();

Import clause exports with renaming:

// file app.js

// importing all
import { testFunction as myWishedName, TestClass } from '/.exportModule'

myWishedName('Imported with success!');

Clause export with using different names:

// file exportModule.js

function testFunction(param) {
    console.log(param)
};

class TestClass {
    constructor() {
        this.name = test;
    }
};

export { testFunction as exportedFunction , TestClass as exportedClass }

Import clause export where names have been changed:

// file app.js

// importing all
import { exportedFunction, exportedClass } from '/.exportModule'

exportedFunction('Imported with success!');

Inline Export (can't export using different names as it is possible with clause export):

// file exportModule.js

export function testFunction(param) {
    console.log(param)
};

export class TestClass {
    constructor() {
        this.name = test;
    }
};

Import inline export:

// file app.js

// importing all
import { testFunction, TestClass } from '/.exportModule'

testFunction('Imported with success!');

Default export - if you would like to export a single value or create fallback value for your module. Can be used only once per module.

// file exportModule.js

export default const myVariableFunction = param => {console.log(param)};

// the same as:

const myVariableFunction = param => {console.log(param)};

export { myVariableFunction as default };

Import default export:

// file app.js

import myVariableFunction from '/.exportModule'

myVariableFunction('Imported with success!')

Default export already is an alias, hence they don't need to be named the same as it is in the export when imported:

// file app.js

// import default doesn't require to be sorrounded by {} when importing
import importDefault from '/.exportModule'

importDefault('Imported with success!')

Mixed export (default export and clause export):

// file exportModule.js

function testFunction(param) {
    console.log(param)
}

class TestClass {
    constructor() {
        this.name = test;
    }
}

export default const myVariableFunction = param => {console.log(param)}

export { testFunction, TestClass }

Mixed import:

// file app.js

import importDefault, { testFunction, TestClass } from '/.exportModule'

importDefault('Log this');

Namespace import, using alias is required here:

// file app.js

import * as myNameSpace from '/.exportModule'

myNameSpace.testFunction('Hello World');

Some observations using import/export:

Modules require to add type="module" in script tag in HTML

    <script src="somepath.js" type="module"></script>
    ```



  - In order to check your code using LiveServer extension with VSCode and modules you have to type the file extension (.js) when specifying the path to the exported module

  -

 ```javascript
    import * as myNameSpace from '/.exportModule.js'
    ```



  - Default mode of modules is strict mode, so you don't have to include 'use strict' in your modules

  - Modules are executed asynchronously

This is my first article, so if you found it interesting or not, let me know! I would love to know what you think about it. If you have some specific observations about import/export modules it would be great if you could share it in comments.

DEV Community: maaajo

Modules in ES6