til
til copied to clipboard
raycon
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/
Module
모듈은 재사용 가능한 코드 조각이다. 모듈은 상세한 구현을 캡슐화하고, 접근 가능한 API를 제공함으로써 다른 코드에서 쉽게 읽고 사용할 수 있다.
Module format
모듈 포맷은 모듈을 정의하기 위해 사용하는 문법이다. ES6 이전에는 모듈을 정의하는 공식적인 문법이 없었기 때문에, 똑똑한 개발자들이 여러가지 포맷을 고안해서 사용했다.
- Asynchronous Module Definition (AMD) : 브라우저에서 사용된다.
- CommonJS : Node.js 에서 사용되었다.
- Universal Module Definition (UMD): 브라우저와 Node.js 에서 사용되었다.
- System.register : ES6 모듈 문법을 ES5 에서 사용할 수 있게 하기 위해 설계되었다.
- ES6 module format : 자바스크립트는 ES6부터 모듈을 정의하는 공식적인 문법을 갖게 되었다.
Transpiler
ES6 모듈 포맷을 사용할 수 있지만, 이를 지원하지 않는 브라우저를 위해서 Babel과 같은 트랜스파일러가 필요하다. 트랜스파일러는 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔준다.
Polyfill
폴리필은 기존의 브라우저에서 새롭게 추가된 기능을 사용하기 위해 필요한 코드다. 트랜스파일러가 코드를 변환할 때 옛날 규격에 존재하지 않는 새로운 기능을 메꿔주는(fillin) 역할을 한다. 잘 알려진 예로 core-js와 polyfill.io가 있다.
모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수다.
Module loaders
모듈 로더는 브라우저에서 런타임에 특정 모듈 포맷으로 작성된 모듈을 해석(interpret)하고 로드한다. 잘 알려진 예로 RequireJS와 SystemJS가 있다.
Module bundlers
모듈 번들러는 모듈 로더를 대체하며, 빌드 시점에 모든 코드를 합친 bundle을 생성한다. 잘 알려진 예로 Browserify와 Webpack이 있다.
