Tutorial of module.exports, exports, default export and named export in JavaScript

By : FiveMinute  |  Updated On : 21 Feb, 2021

Tutorial of module.exports, exports, default export and named export in JavaScript

There are so many ways of export anything in JavaScript. Export anything in JavaScript is different in different plateforms like node, angular, react etc. Currently NodeJS doesn't support export default but this problem is solved when you transpile the code using babel. Babel is used to transpile the code into plain JS so that browser can easily understand the code.

Most browser and in NodeJS Plateform doesnot support every export functionality of ECMAScript 6. That's why Babel Transcompiler comes into the picture to solve this problem. Here we are also discussing about nodeJS because when we write ECMAScript 6 code in any client side framework like Angular or React and we need server side rendering for SEO. That time we need to run the same client code in server also there we need babel transpiler to transpile the code and it works with export and import of ECMAScript 6.

 

1st we know how to exports work in NodeJS Plateform.

In NodeJS each file is treated as module and the entire code of each file is wrapped with wrapper function. Below is the wrapper function.

(function(exports, require, module, __filename, __dirname) { 
    // Module code actually lives in here 
}); 

In the above wrapper function there is a several parameters with exports and module. Basically exports and module parmeter is used to export any thing which can be used outside. module.exports is a global empty object which is used by the require function to import the exported things and exports is just a reference of module.exports object.

We can loss the reference of module.exports from exports object if we directly assign any function or variable on it, after doing this also export will not work via using exports object. Eg. below.

exports = function() {
   //function code here
}

using above code you cannot export the function because exports object lost the reference of  module.exports object.

You can achive the above expectaion by exporting object or you can say named export. check below example.

exports.add = function(){
   //function code here
}
//OR
module.exports.add = function(){
   //function code here
}

//You can import above export by below code.
var fn = require('./filename');
fn.add();

//Also you can import or require by destructing operator
var { add } = require('./filename');

In NodeJs as I already told you there is no export default kind of thing. If you use export default than you have to transpile your nodeJS code through babel using webpack. But you can get the benefit of export default in NodeJS by using the below technique.

//export default technique
module.exports = function(){
   //function code here
}

//You can also multiple export from same file and require through destructing operator
module.exports.name = "fiveminute";

//require in another file - Make sure if you export with default and named than you need to use require 2 times like below.
var add = require('./filename');
var { name } = require('./filename');

 

Now lets talk about export and import in ECMAScript 6. We just use the ECMAScript 6 code in Angular, React or any client side framework. Using ECMAScript 6 code cannot directly use it in the browser, to use the same code in browser you have to transpile the code through babel transpiler with WebPack.

1. export default : Using export default you can only one default export in single file. And you import the default export by any name alias like below.

export default function(){
  //function code here
}

//write above code in another way
function add(){
  //function code here
}
export default add;

//Import the above code
import add from './filename';
//OR
import addAlias from './filename';

2. Named Export : If you use a named export, you can have multiple exports per file and you need to import the exports surrounded in braces with the name you have exported.

// Demo.js -- using named exports
export class DemoClass { /* ... */ }
export class OtherDemoClass { /* ... */ }

Import your exported class.

import { DemoClass } from "./Demo";

You can export multiple classes like below.

import { DemoClass, OtherDemoClass } from "./Demo";
// use DemoClass and OtherDemoClass

Or you cn also import with different name from exported name.

import { DemoClass, OtherDemoClass as OtherDemoClassAlias } from "./Demo";
// use DemoClass and OtherDemoClassAlias

Or you can import everything that's exported by using * as:

import * as DemoClasses from "./Demo";
// use DemoClasses.DemoClass and DemoClasses.OtherDemoClass here