48장 모듈 & 49장 Babel과 Webpack

48장 모듈

 

p.891

- 모듈(module)이란 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 말한다. 모듈은 공개가 필요한 자산에 한정하여 명시적으로 선택적 공개가 가능하고 이를 export라 한다. 모듈 사용자는 모듈이 공개(export)한 자산 중 일부 또는 전체를 선택해 자신의 스코프 내로 불러들여 재사용할 수 있는데 이를 import라 한다.

p. 897

- 모듈에서 하나의 값만 export한다면 default 키워드를 사용할 수 있다. default 키워드를 사용하는 경우 기본적으로 이름 없이 하나의 값을 export하고 var, let, const 키워드는 사용할 수 없으며, {} 없이 임의의 이름으로 import한다.

// lib.mjs
export default const foo = () => {};
// => SyntaxError: Unexpected token 'const'
// export default () => {};

export default x => x * x;


// app.mjs
import square from './lib.mjs';
console.log(square(3)); // 9

 

49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

 

p.899

- 매년 새롭게 도입되는 ES6 이상의 버전(ES6+)과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 제각각이다. 트랜스파일러(trainspiler)인 Babel과 모듈 번들러(module bundler)인 Webpack을 이용하여 ES6+/ES.NEXT 개발 환경을 구축한다.

 

p.900

- Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있다.

 

p.908

- Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러다. Webpack을 사용하면 별도의 모듈 로더가 필요 없고, HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.

 

 

p.909

- Webpack이 모듈을 번들링할 때 Babel을 사용하여 ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링하도록 babel-loader를 설치한다. 트랜스파일링은 Babel이 수행하고 번들링은 Webpack이 수행한다.

 

p.912

- Babel을 사용하여 ES5 사양의 소스코드로 트랜스파일링해도 브라우저가 지원하지 않아 ES5 사양으로 대체할 수 없는 기능은 polyfill을 이용한다.