Javascript에서 CJS, AMD, UMD 및 ESM은 도대체 무엇입니까?

초창기의 Javascript에는 모듈을 가져오고 내보내는 방법이 없었습니다. 이것은 큰 프로젝트를 개발함에 있었어 큰 문제점을 만들었습니다.
단 하나의 파일로 앱을 작성한다고 상상해보세요. 악몽과도 같을 것입니다!
코딩의 복잡성을 해소하기위해 많은 사람들이 Javascript에 모듈을 추가하려고 시도했습니다.
그 중 일부는 CJS, AMD, UMD 및 ESM입니다.

CJS

CJS CommonJS의 약자입니다.

// importing 
const doSomething = require('./doSomething.js'); 

// exporting
module.exports = function doSomething(n) {
  // do something
}

• NodeJs에서 CJS 구문을 주로 사용합니다. 노드가 CJS 모듈 형식을 사용하기 때문입니다.
• CJS는 모듈을 동 기적으로 가져옵니다.
• 라이브러리 node_modules 또는 로컬 디렉터리에서 가져올 수 있습니다.

const myLocalModule = require('./some/local/file.js')
var React = require('react');

• CJS가 가져올 때 가져온 개체의 복사본을 제공합니다.
• CJS는 브라우저에서 작동하지 않습니다. 번역 및 번들로 제공되어야 합니다.

AMD

AMD는 Asynchronous Module Definition의 약자입니다. 샘플 코드는 다음과 같습니다.

define(['dep1', 'dep2'], function (dep1, dep2) {
    //Define the module value by returning a value.
    return function () {};
});

또는

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html
define(function (require) {
    var dep1 = require('dep1'),
        dep2 = require('dep2');
    return function () {};
});

• AMD는 모듈을 비동기식으로 가져옵니다(따라서 이름).
• AMD는 프론트엔드용으로 만들어졌습니다(제안 당시)(CJS 백엔드 동안).
• AMD 구문은 CJS보다 덜 직관적입니다. 저는 AMD를 CJS의 정반대 형제라고 생각합니다.

UMD

UMD는 Universal Module Definition의 약자입니다. 가장 일반적인 것으로 npm 등을 통해 다양한 포맷이 존재한다면 umd로 정의된 것을 사용하는 것이 가장 좋습니다.

(function (root, factory) {
    if (typeof define === "function" && define.amd) {
        define(["jquery", "underscore"], factory);
    } else if (typeof exports === "object") {
        module.exports = factory(require("jquery"), require("underscore"));
    } else {
        root.Requester = factory(root.$, root._);
    }
}(this, function ($, _) {
    // this is where I defined my module implementation

    var Requester = { // ... };

    return Requester;
}));

• 프런트 엔드와 백엔드에서 작동합니다(따라서 범용이라는 이름).
• UMD는 CJS나 AMD와 달리 여러 모듈 시스템을 구성하는 패턴에 가깝다. 더 많은 패턴을 보려면 여기를 확인하십시오.
• UMD는 일반적으로 Rollup/Webpack과 같은 번들러를 사용할 때 대체 모듈로 사용됩니다.

ESM

ESM은 ES 모듈을 의미합니다. 표준 모듈 시스템을 구현하기 위한 Javascript의 제안입니다. 많은 분들이 이것을 보셨을 것입니다.

import React from 'react';

import {foo, bar} from './myLib';

...

export default function() {
  // your Function
};
export const function1() {...};
export const function2() {...};

• 많은 최신 브라우저에서 작동
• CJS와 같은 간단한 구문과 AMD의 비동기식이라는 두 가지 장점을 모두 갖추고 있습니다.
• ES6의 정적 모듈 구조로 인해 트리 흔들림 가능
• ESM을 사용하면 Rollup과 같은 번들러가 불필요한 코드를 제거하여 사이트에서 더 적은 코드를 배송하여 더 빨리 로드할 수 있습니다.
• HTML에서 호출할 수 있습니다. 다음을 수행하십시오.

<script type="module">
  import {func1} from 'my-lib';

  func1();
</script>

요약

• ESM은 간단한 구문, 비동기 특성 및 트리 흔들림 기능 덕분에 최고의 모듈 형식입니다.
• UMD는 모든 곳에서 작동하며 일반적으로 ESM이 작동하지 않는 경우 대체 수단으로 사용됩니다.
• CJS는 동기식이며 백엔드에 적합합니다.
• AMD는 비동기식이며 프런트 엔드에 적합합니다.