자바스크립트 모듈 시스템

- JavaScript Module System

* ECMACScript 2015 (ES6)

- 비로소 모듈시스템이 도입되었으나 

2018년 현재 브라우저에 구현이 다되어있지 않아서 호환성 문제

- IE와 안드로이드 가 문제

- ECMAScript 6 compatibility table(브라우저 호환성 테스트 결과)

https://kangax.github.io/compat-table/es6/

//==================================

< ECMACScript 5 이하에서 모듈 구현>

- 각자의 포맷이 난립

* CommonJS

JavaScript를 브라우저 외의 다른 플랫폼에서도 동작하는 기술의 표준을 제정하는 단체

Node.js 가 사용

* AMD (Asynchronous Module Definition )

비동적으로 모듈을 로드하는 기술의 표준을 만드는 단체, CommonJS에서 독립

CommonJS의 모듈 전송 포맷보다는 간단하고 명확

* UMD (Universal Module Definition )

CommonJS 와 AMD 모두에 호환성 있음

// 변환기

* BabelJS

ES6 문법을 사용한 코드를 예전 ES5 자바스크립트 코드로 바꿔주는 도구

//======================

< 모듈 로더 >

특정 모듈 형식으로 작성된 모듈을 해석하고 로드

런타임에 실행됨

* RequireJS : AMD 형식의 모듈 용 로더

* SystemJS : AMD, CommonJS, UMD 또는 System.register 형식의 모듈 용 로더

//========================

< 모듈 번들 >

- 모듈 로더를 대체

- 빌드시에 실행됨

- 빌드시 번들 파일로 묶임

- 브라우저에서 번드파일을 로드

* Webpack : AMD, CommonJS, ES6 모듈 용 번들러

* Browserify : CommonJS 모듈 용 bundler

//===============

//참고

A 10 minute primer to JavaScript modules, module formats, module loaders and module bundlers

https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/

JavaScript 표준을 위한 움직임: CommonJS와 AMD (2012)

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

ES2015(ES6) 모듈 시스템

https://www.zerocho.com/category/ECMAScript/post/579dca4054bae71500727ab9