ES6 이상의 버전인 ES6+ 와 제안 단계에 있는 ES 제안 사양인
ES.NEXT 는 브라우저에 따라 지원율이 다를 수 있다
최신 ECMAScript 사양으로 프로젝트를 진행하려면
지원하지 않는 곳에서도 동작시키기 위한 개발 환경을 구추갷야 한다
또한 대부분 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다
ESM 을 사용하더라도 트랜스파일링이나 번들링이 필요하다
트랜스파일러인 Babel 과 모듈 번들러인 Webpack 을 이용하여 ES6+/ES.NEXT 개발 환경을 구축할 수 있다
ES6 화살표 함수와 ES7 의 지수 연산자를 지원하지 않는 경우
바벨을 사용하면 코드를 변환해준다
[1, 2, 3].map(n => n ** n)"use strict"
[1, 2, 3].map(function (n) {
return Math.pow(n, n)
})바벨은 ES5 의 코드로 트랜스파일링 해준다
바벨 설치
npm install --save-dev @bebel/cor @babel/cli바벨 프리셋 설치와 babel.config.json 설정 파일 작성
바벨을 사용하려면 @babel/preset-env 를 설치해야 한다
함께 사용되어야 하는 바벨 플러그인의 모음이다
바벨 프리셋이라고 부른다
바벨이 제공하는 공식 프리셋은 다음과 같다
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
env 는 필요한 플러그인들을 프로젝트 환경에 맞춰 동적으로 결정해준다
프로젝트 지원 환경은 Browserslist 형식으로 .browserlistrc 파일에 설정할 수 있다
생략 시 기본 값으로 설정된다
바벨 프리셋 설치
npm install --save-dev @babel/preset-env프로젝트 루트 폴더에 babel.config.json 설정 파일을 작성한다
{
"presets": ["@babel/preset-env"]
}트랜스파일링
Babel 을 사용하여 ES6+/ES.NEXT 사양의 소스코드를
ES5 소스코드로 트랜스파일링 할 수 ㅣㅇㅆ다
Babel CLI 로 할 수도 있으나 매번 CLI 명령어를 입력하기 보다는
npm Scripts 에 Babel CLI 명령어를 등록하여 한다
packagage.json 파일에 scripts 를 추가한다
"scripts": {
"build": "babel src/js -w -d dist/js"
}npm build 시 src/js 폴더에 있는 모든 자바스크립트 파일들을 트랜스파일링 후 결과물을 dist/js 에 저장한다
-w: 타깃 폴더에 있는 모든 자바스크립트 파일들의 변경을 감지하여 자동으로 트랜스파일링 한다 (--watch 의 축약)
-d: 트랜스파일링된 결과물이 저장될 폴더를 지정한다 (--out-dir 옵션의 축약)
현재 제안 단계에 있는 사양을 트랜스파일링 하려면 별도의 플러그인을 설치해야 한다
바벨 플러그인 설치
Babel 플러그인은 Babel 홈페이지에서 검색할 수 있다
바벨 플러그인 중에서 public/private 클래스 필드를 지원하는
@babel/plugin-proposal-class-properties 도 있다
Webpack
웹팩은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러개) 의 파일로 번들링 하는 모듈 번들러다
웹팩을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없다
여러개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서
script 태그로 자바스크립트 파일을 로드해야하는 번거로움도 사라진다
Webpack 설치
npm install --save-dev webpack webpack-cli
babel-loader 설치
웹팩이 모듈을 번들링할 때 바벨을 사용하여
ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로
트랜스파일링 하도록 바벨 로더를 설치한다
npm install --save-dev babel-loader
npm scripts 에서 바벨 대신 webpack 을 사용하도록 수정한다
"scripts": {
"build": "webpack -w"
}webpack.config.js 설정 파일 작성
webpack.config.js 는 웹팩이 실행될 때 참조하는 설정 파일이다
루트 폴더에 파일을 생성한다
설정 후 웹팩을 사용하면
바벨로 트랜스파일링을 하고 웹팩으로 번들링을 할 수 있다
babel-polyfill 설치
바벨로 트랜스파일링을 해도 지원하지 않는 코드가 남아있을 수 있다
ES5 사양에 대체할 수 있는 코드가 없는 경우
Promise, Object.assign, Array.from 등을 사용하기 위해서는 @babel/polyfill 을 사용한다
npm install @babel/polyfill
babel-polyfill 은 개발 환경에서만 사용하는 것이 아니라
실제 운영 환경에서도 사용해야 한다
import 를 사용하는 경우에는 진입점의 선두에서 먼저 폴리필을 로드한다
웹팩을 사용하는 경우에는 webpack.config.js 파일의
entry 배열에 폴리필을 추가한다
