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.
Top comments (0)