How different is CommonJs require from ES6 import?

In JavaScript, you can use either ECMAScript 6(ES6) modules or CommonJs modules in your project and there are a few differences between these that do affect how your program modules are loaded. In this article, I explore how each works and how it may a…


This content originally appeared on DEV Community and was authored by Mike Mwanje

In JavaScript, you can use either ECMAScript 6(ES6) modules or CommonJs modules in your project and there are a few differences between these that do affect how your program modules are loaded. In this article, I explore how each works and how it may affect your program execution.

CommonJs modules.

CommonJs is the original and default module system of Node.js which uses require and module.exports. Below is an example.

// Importing modules
const fs = require('fs');
const fileDelete = require('./fileDeleter');
const fileName = require('./fileNamer');

const writeFile = (data) => {
  return fs.writeFileSync(fileName, data);
}

// Exporting writeFile module
modules.exports = writeFile;

With require, you can’t selectively load only the modules you need. This means even the fileDelete module from the example above will be imported even if it is not needed or used anywhere. Additionally, importing of the modules is synchronous which means that fileName module can’t be imported before fs and fileDelete modules are imported, and a failure to import fileDelete will cause run-time errors even if it is not used anywhere in our program. CommonJS modules are the choice for the node.js server.

ECMAScript modules

ECMAScript modules are relatively newer and use import and export. Below is the transformation of our CommonJs example from above to ESM.

// Importing modules
import fs from 'fs';
import fileDelete from './fileDeleter';
import fileName from './fileNamer';

const writeFile = (data) => {
  return fs.writeFileSync(fileName, data);
}

// Exporting writeFile module
export default function writeFile;

With import, you load only the modules you need. For example, the fileDelete module from the above will not be imported since it is not used anywhere. Additionally, the importing of the modules is asynchronous which means that both fs and fileName are imported at the same time. You generally want to use ESM for your new projects.

…how about .cjs and .mjs?
.cjs is a file extension for CommonJS modules while .mjs is a file extension for ECMAScript module. Node.js by default treats .js files as CommonJS modules. You can change this by adding "type": "module"to your package.json file so you can use ECMAScript modules (in your .mjs files) within a Node.js environment. This is what Google Chrome V8 recommends.

I hope this was helpful to you and for further reading, do checkout JavaScript modules.

Happy coding!


This content originally appeared on DEV Community and was authored by Mike Mwanje


Print Share Comment Cite Upload Translate Updates
APA

Mike Mwanje | Sciencx (2021-08-28T09:28:36+00:00) How different is CommonJs require from ES6 import?. Retrieved from https://www.scien.cx/2021/08/28/how-different-is-commonjs-require-from-es6-import/

MLA
" » How different is CommonJs require from ES6 import?." Mike Mwanje | Sciencx - Saturday August 28, 2021, https://www.scien.cx/2021/08/28/how-different-is-commonjs-require-from-es6-import/
HARVARD
Mike Mwanje | Sciencx Saturday August 28, 2021 » How different is CommonJs require from ES6 import?., viewed ,<https://www.scien.cx/2021/08/28/how-different-is-commonjs-require-from-es6-import/>
VANCOUVER
Mike Mwanje | Sciencx - » How different is CommonJs require from ES6 import?. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/28/how-different-is-commonjs-require-from-es6-import/
CHICAGO
" » How different is CommonJs require from ES6 import?." Mike Mwanje | Sciencx - Accessed . https://www.scien.cx/2021/08/28/how-different-is-commonjs-require-from-es6-import/
IEEE
" » How different is CommonJs require from ES6 import?." Mike Mwanje | Sciencx [Online]. Available: https://www.scien.cx/2021/08/28/how-different-is-commonjs-require-from-es6-import/. [Accessed: ]
rf:citation
» How different is CommonJs require from ES6 import? | Mike Mwanje | Sciencx | https://www.scien.cx/2021/08/28/how-different-is-commonjs-require-from-es6-import/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.