moduleProject

CommonJs

exports, require키워드를 사용한 방식

const fun1 = require('example');

example 이라는 모듈(라이브러리)를 require이라는 키워드를 통해 불러와 변수에 할당하는 방식이다.

const div = 2;

const func1 = function (num2) {
  return num2 / div;
};

exports.func1 = func1;

module.exports = func1;

exports키워드를 통해 여러개의 객체들을 내보낼 수도 있고 module.exports키워드를 통해 한개의 객체만 보낼 수도 있다.

CommonJs는 모든 파일이 디스크에 있는 상황을 전제로 한다. (서버 사이드) 때문에, 한개의 Js파일을 내려받는데 그 파일에 추가되어있는 의존성 파일들(모듈)을 모두 서버사이드에서 다운받아 처리한 후에 응답을 주기 때문에 block된다는 문제가 있다.

이는 동적으로 script 태그를 삽입하는 방법으로 극복을 하려고 한다고 한다. (브라우저가 특정 Js를 로딩하는 동안 block이 되기 때문에 이를 막고자 js파일내에서 script태그를 만들고 나중에 특정 태그에 붙이는 방법)

서버의 모듈을 비동기적으로 전달하기 위해서는 require.define({},[])의 포맷으로 감싸 전송하면 브라우저는 비동기적으로 로드할 수 있다.

AMD

import - from키워드를 이용하여 모듈을 로드하는 방식으로 CommonJs에 비해 명시적이다.

비동기환경과 서버사이드에서 잘 동작하고 define() 함수를 이용해 모듈을 구성해 전역변수의 문제가 없다.

보통 트리 쉐이킹을 위해 프론트에서는 AMD명세를 사용한다.

---

Reference

https://d2.naver.com/helloworld/12864