[💡] module system

💡

CJS (Common JS)

• require(<path>)
• Node JS 는 기본으로 Common JS 방식을 사용한다.
• 모듈을 동기적으로 가져온다.
• 브라우저에서 동작하지 않는다.
• 가져온 모듈의 복사본을 제공한다.

const jQuery = require('jQuery')

AMD (Asynchronous Module Definition)

• AMD 는 모듈을 비동기적으로 가져온다.
• 브라우저에서 동작한다.

define(["jquery"], function ($) {
  return function() {}
});

UMD (Universal Module Definition)

• 브라우저와 Node 기반에서 모두 동작한다.
• 스펙이아닌 코드 작성 패턴이다.

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

    var Requester = { // ... };

    return Requester;
}));

ESM (ES Modules)

• ES 표준 모듈 시스템
• 간단한 구문
• 비동기식으로 동작
• 정적 모듈 구조로 인한 Tree Shakeable

import React from 'react';

Reduce JavaScript Payloads with Tree Shaking | Web Fundamentals