DEV Community

loading...

Modules in ES6

maaajo profile image maaajo ・2 min read

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. 

Discussion (0)

pic
Editor guide