How are UMD and CommonJS (CJS) package folders different, and which should I use?

Question

I installed reactjs and react-dom like this with package.json

    "dependencies": {
        "bootstrap": "^v4.1.1",
        "popper.js": "^1.14.3",
        "react": "^v16.4.1",
        "react-dom": "^16.4.1"
    }

It downloaded react folder and react-dom folder correctly.

Both folders have cjs and umd folder and they have a lot of JavaScript files.

For me it's unable to find difference between files in two folders.

Like this:

    URL: node_modules/react/umd
      react-development.js
      react-production.min.js

    URL: node_modules/react/cjs
       react-development.js
       react-production.min.js

almost same with react-dom. It also has cjs and umd folder and I don't know which file from which folder should I use to develop a React application or website.

Appreciation

What does your development environment look like? You might not have to worry about what file to use, if your development environment allows you to just import the modules: import React from 'react'; import ReactDOM from 'react-dom'; – Larianna

@Larianna Thanks for comment. I just downloaded some libraries with npm install so there is nothing which I can say as "environment".Now, I can say I will develop something in windows 7. That's all. Don't I need cdn in html if I use import React blah blah in js file? – Appreciation

Alright. Have you stumbled upon one of the many starting points for React apps, e.g. create-react-app? It will make the experience much better for you if you are just starting out. – Larianna

@Larianna No but I know it can help me. I already had some react lessons and projects before but environment was already built. Now I am just trying to make my own environment and just wondered if there are any difference between two folders. – Appreciation

Alright, I understand. cjs (commonJS) is the module system used by e.g. Node, and umd (Universal Module Definition) is the type of modules that strive to work everywhere. If you want to include any of these files in the browser as standalone script tags without a build step like e.g. Webpack, you will want to use umd. – Larianna

@Larianna Ah, Thank you for great comments!! – Appreciation

@Tholle: You should make your comment into an answer. – Boloney

Answer 1

JavaScript was originally for interactive browsers only. With NodeJS, it is used in non-browser contexts. Because of this and other factors, there are incompatible formats for modules:

• The “CommonJS” specification describes the use of an exports object which is the API to declare and discover what names are exported from a module. No allowance is made for loading a CommonJS module in an interactive browser. NodeJS is the most popular implementation of the CommonJS format.

• The “Asynchronous Module Definition” (AMD) describes how to bundle JavaScript modules on the assumption they will be loaded in an interactive browser. RequireJS is one of the more popular module-support libraries, and it consumes AMD modules.

• Because AMD and CommonJS are both very popular and mutually unintelligible to each other, the “Universal Module Definition” (UMD) is a pattern to make a module that can be consumed by both, at the cost of a more complicated format.

• More recently, ECMAScript 2015 defines export and import syntax (different from all the above) to support modules.

Which should you use? You'll need to answer that based on what in your build system will be consuming those modules.

Today (2022-02), the most likely answer is: use ECMAScript modules, which are now supported for years, in NodeJS and major browsers.

If you need to support very outdated JavaScript engines you might need one of the earlier formats, but you should have a schedule to drop support for those.

Relict

As of 2021, for frontend project, always use/distribute ES module. There is no point of distributing CommonJS anymore, unless you're working on some super legacy tech. And even in that case, i'd highly suggest you migrate your legacy techs instead of keep supporting it. – Childbed