{"id":642,"date":"2023-09-23T17:37:45","date_gmt":"2023-09-23T23:37:45","guid":{"rendered":"https:\/\/kop.lat\/blog\/?p=642"},"modified":"2023-09-23T17:37:45","modified_gmt":"2023-09-23T23:37:45","slug":"es-modules-vs-commonjs-modules-in-javascript","status":"publish","type":"post","link":"https:\/\/kop.lat\/blog\/es-modules-vs-commonjs-modules-in-javascript\/","title":{"rendered":"ES Modules vs CommonJS Modules in Javascript"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Two different syntax and are suitable for different JavaScript environments:<\/p>\n\n\n\n

    \n
  1. ES Modules (import statement):<\/strong><\/li>\n<\/ol>\n\n\n\n
       import express from 'express';<\/code><\/pre>\n\n\n\n
      \n
    • This syntax is part of ECMAScript (ES) modules, introduced in ES6 (ECMAScript 2015).<\/li>\n\n\n\n
    • It is the recommended and modern way to handle module imports in JavaScript when you are working with a bundler like Webpack or using a JavaScript environment that supports ES modules (e.g., Node.js with \"type\": \"module\"<\/code> in package.json<\/code>).<\/li>\n\n\n\n
    • It provides a more standardized and explicit way to import and export modules.<\/li>\n\n\n\n
    • You can use named imports (e.g., import { Router } from 'express';<\/code>) to import specific parts of a module.<\/li>\n<\/ul>\n\n\n\n
        \n
      1. CommonJS Modules (require function):<\/strong><\/li>\n<\/ol>\n\n\n\n
           const express = require('express');<\/code><\/pre>\n\n\n\n
          \n
        • This syntax is part of CommonJS modules, which have been the traditional way to handle module imports in Node.js.<\/li>\n\n\n\n
        • It works well with Node.js without any additional configuration.<\/li>\n\n\n\n
        • It uses the require<\/code> function to load modules and assigns them to variables.<\/li>\n\n\n\n
        • It’s still widely used in existing Node.js applications and libraries.<\/li>\n<\/ul>\n\n\n\n
          If you are working on a modern Node.js project with support for ES modules (e.g., Node.js 14+ with \"type\": \"module\"<\/code> in package.json<\/code>), you can use the import<\/code> statement. Otherwise, if you are working in an older Node.js environment or with existing code that uses CommonJS modules, you should use require<\/code>.<\/p>\n\n\n\n
          <\/p>\n","protected":false},"excerpt":{"rendered":"
          Two different syntax and are suitable for different JavaScript environments: If you are working on a modern Node.js project with support for ES modules (e.g., Node.js 14+ with “type”: “module” in package.json), you can use the import statement. Otherwise, if you are working in an older Node.js environment or with existing code that uses CommonJS […]<\/p>\n","protected":false},"author":1,"featured_media":474,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[36,35,40],"tags":[],"_links":{"self":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/642"}],"collection":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":1,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":643,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions\/643"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media\/474"}],"wp:attachment":[{"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kop.lat\/blog\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}