.gif&blockId=11b00c82-b138-8050-a58b-dcbceda2ef8f)
개요
대부분의 최신 브라우저의 ES6 지원율은 높지만, IE 11dml ES6의 지원율은 낮기 때문에 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축해야 한다 --> 트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용한다.
ES6 모듈은 대부분의 모던 브라우저에서 사용할 수 있지만 다음의 이유로 별도의 모듈 로더를 사용하는 것이 일반 적이다.
•
IE를 포함한 구형 브라우저는 ESM 지원 X
•
ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함이 없다.
•
ESM이 아직 지원하지 않는 기능이 있고 점차 해결되고는 있지만 아직 몇가지 이슈가 존재한다.
Babel
Babel은 ES6+/ES.NEXT로 구현된 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환시킬 수 있다.
Babel 설치
npm을 사용하여 Babel 설치
프로젝트 폴더에서
npm init -y
npm install --save-dev@babel/core @babel/cli
Plain Text
복사
Babel 프리셋 설치와 babel.config.json 설정 파일 작성
babel을 사용하기 위해 @babel/preset-env 설치해야함 (함께 사용되어야 하는 babel 플러그인을 모아둔 것을 바벨 프리셋이라고 부른다.
npm install --save-dev @babel/preset-env
Plain Text
복사
babel.config.json 설정파일 생성 후
{
"presets": ["@babel/preset-env"]
}
Plain Text
복사
지금 설치한 babel/preset-env를 사용하겠다는 의미
트랜스파일링
매번 Babel CLI를 입력할 순 없으므로 package.json을 활용하여 scripts에 명령어를 등록하여 사용한다.
"scripts": {
"build": "babel src/js -w -d dist/js"
}
Plain Text
복사
src/js 폴더에 있는 모든 JS 파일들을 트랜스파일링한 후, 결과물을 dist/js폴더에 저장한다는 의미이다.
•
w: 타깃 폴더에 있는 모든 JS 파일들의 변경을 감지하여 자동으로 트랜스파일한다. (--watch 옵션의 축약형)
•
d: 트랜스파일링된 결과물이 저장될 폴더를 지정한다. 만약 지정된 폴더가 존재하지 않으면 자동 생성한다. (--out-dir 옵션의 축약형)
이후 npm run build 명령어를 사용하여 트랜스파일링을 진행할 수 있지만, ES6 클래스의 #private 와 같은 클래스 필드 정의 제안의 경우 지원을 하지 않아 에러가 발생한다.
이를 위해선 별도의 플러그인 설치가 필요하다
Babel 플러그인 설치
Babel 홈페이지에 들어가 class filed를 입력 후 나오는 플러그인을 설치한다.
npm install --save-dev @babel/plugin-proposal-class-properties
Plain Text
복사
babel.config.json에 다음과 같이 추가
"plugins": ["@babel/plugin-proposal-class-properties"]
Plain Text
복사
이후 실행
브라우저에서 모듈 로딩 테스트
Node.js 환경에서는 CommonJS 방식의 모듈 로딩 시스템을 따라서 정상적으로 잘 동작되지만, 브라우저는 CommonJS의 require 함수를 지원하지 않으므로 트랜스파일링된 결과를 그대로 실행하면 에러가 발생한다.
브라우저의 ES6 모듈을 사용하도록 Babel을 설정할 수 있으나, ESM은 앞서 말한 3가지 문제점이 존재하기 때문에 WebPack을 사용한다.
Webpack
웹팩은 의존 관계에 있는 JS, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러다.
Webpack 설치
npm install --save-dev webpack webpack-cli
Plain Text
복사
babel-loader 설치
npm install --save-dev babel-loader
Plain Text
복사
npm scripts를 변경하여 Babel 대신 Webpack을 실행하도록 수정
"scripts": {
"build": "webpack -w"
}
Plain Text
복사
webpack.config.js 설정 파일 작성
•
-> 책 참조
이후 Webpack을 실행후, 생성된 결과물을 index.html의 script src로 지정하고 브라우저를 실행시키면 정상적으로 작동된 것을 확인할 수 있다.
babel-polyfill 설치
Promise, Object.assign, Array.from 등은 트랜스파일링이 되지 못하고 그대로 남아서 이를 위해 babel-polyfill을 설치한다.
npm install @babel/polyfill
Plain Text
복사
이는 개발 환경에서만 사용하는 것이 아닌 실제 운영 환경에서도 사용해야하기 때문에 --save-dev 옵션을 지정하지 않는다.
바벨만 사용하는 경우 진입점 파일의 선두에 import @babel/polyfill";을 작성한다.
Webpack을 사용하는 경우 entry 배열에 폴리필을 추가하여 사용한다. entry: ['@babel/polyfill', './src/js/main.js'],
이후 명령어로 실행 후, 번들링된 파일을 확인해보면 폴리필이 추가된 것을 확인할 수 있다.
