commonJS & AMD는 js 애플리케이션에서 어떻게 모듈과 dependency가 선언되는지를 정의하는 명세로,
commonJS의 동기적 모듈 호출에 따르는 브라우저단의 모듈링에서의 이슈를 해결하기 위해 commonJS로부터 파생된 모듈 스펙이 AMD(병렬 모듈 호출이 가능)이다.
일반적으로 client에서는 AMD가, server에서는 commonJS가 적합하지만,
두 스펙 모두 server, client 환경에서 모두 사용이 가능하다.
AMD의 대표적 라이브러리로는 requireJS, curlJS가 있고,
commonJS를 브라우저단에서 활용하기 위한 라이브러리로는 browserify가 있다.
es6에서 소개한 import export 모듈 스펙은 브라우저단에서 사용이 가능하나, 아직 호환성 문제로 바벨을 통한 컴파일링이 필요하며 node.js에서는 아직 실험적으로만 지원한다.
webpack은 여러 module statement를 지원한다.
commonJS
- js를 브라우저뿐만 아니라, 서버사이드 애플리케이션 또는 데스크톱 애플리케이션에서도 사용할 수 있도록 개발하기 위해 만들어진 단체
- node.js도 commonjs 명세를 따른다.
// 서버사이드에서는 서로 다른 scope를 갖기 떄문에 전역변수가 겹치지 않는다.
// in file1.js
var a = 1;
// in file2.js
var a = 2;
// 2. commonJS의 두 모듈(파일) 간의 정보 교환은 exports/require를 통해 이루어진다.
// in file3.js
var a = 3;
exports.add3 = function (b) {
return b+a;
};
// in file1.js
var a = 1;
var module3 = require('file3');
console.log(module3.add3(a));
- 브라우저의 단일 전역 스코프로 인해 발생하는 변수 충돌을 보완하고자 등장한 commonJS의 서버사이드 비동기 처리 방식
// 서버사이드 complex-numbers/plus-two.js
var sum = require('./math').sum;
exports.plusTwo = function(a){
return sum(a, 2);
};
// 브라우저 complex-numbers/plus-two.js
require.define({'complex-numbers/plus-two':function(require, exports){
var sum = require('./complex-number').sum;
exports.plusTwo = function(a){
return sum(a,2);
};
}, ['complex-numbers/math']);AMD
- 브라우저의 비동기 처리를 매끄럽게 처리하기 위해 commonJS에서 파생된 단체
- 대표적인 라이브러리 : requireJS
<script src="require.js"></script>
// myModule.js
define(['jquery', 'lodash'], function($, _){
console.log($);
console.log(_);
return {
a: $,
b: _,
}
});
// file4.js
require(['myModule', 'otherModule'], function(my, myy){
console.log(my.a); // jqeury ($)
console.log(my.b); // lodash (_)
console.log(myy); // otherModule
};es6
modern javascript 모듈이나 브라우저 호환성 문제로 일반적으로 babel을 통해 commonJS로 컴파일한다.
reference
https://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
https://www.zerocho.com/category/JavaScript/post/5b67e7847bbbd3001b43fd73
