esm

단일 책임 원칙

fsd 패턴

Webpack + babel 사용

Babel CLI 설치

$ npm install --save-dev @babel/core @babel/cli

babelrc 설정 파일 작성

# env preset 설치
$ npm install --save-dev @babel/preset-env

의존성 설치 후 프로젝트 루트에 .babelrc 파일 생성 후 작성

{ "presets": ["@babel/preset-env"] }

위 npm script는 src/js 폴더(타깃 폴더)에 있는 모든 ES6+ 파일들을 트랜스파일링한 후, 그 결과물을 dist/js 폴더에 저장한다. 사용한 옵션의 의미는 아래와 같다.

-w

타깃 폴더에 있는 모든 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (--watch 옵션의 축약형)

-d

트랜스파일링된 결과물이 저장될 폴더를 지정한다. (--out-dir 옵션의 축약형)

Webpack 설치

# Webpack V4는 webpack-cli를 요구한다
$ npm install --save-dev webpack webpack-cli

babel-loader 설치

웹팩이 모듈을 번들링할 때 babel을 사용하여 es6+ 코드를 es5 코드로 트랜스파일링할 수 있도록 babel-loader 설치

오래된 브라우저에서도 ES6+에서 새롭게 추가된 객체나 메소드를 사용하기 위해서는 @babel/polyfill을 설치해야 한다.