모던 자바스크립트 : Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

0. ES6+/ES.NEXT 개발 환경 구축

• ES6+와 ES.NEXT의 최신 ECMAScript 사양을 사용해 프로젝트를 진행하려면 최신 사양으로 작성된 코드를 구형 브라우저에서 문제없이 동작시키기 위한 개발 환경 구축 필요
• 또한 대부분의 프로젝트가 모듈을 사용하기때문에 모듈 로더 필요

ES6 모듈(ESM)

• ES6 모듈(ESM)은 대부분의 모던 브라우저에서 사용 가능하지만 별도의 모듈 로더 사용하는 것이 일반적
  • IE를 포함한 구형 브라우저는 ESM 지원하지 않음
  • ESM을 사용하더라도 트랜스파일링이나 번들링이 필요함
  • ESM이 아직 지원하지 않는 기능(bare import 등)이 있고 점차 해결되고는 있지만 아직 몇가지 이슈 존재

 

1. Babel

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

a. Babel설치

• Babel, Webpack, 플러그인의 버전은 빈번하게 업그레이드됨
• 만약 특정 버전을 설치하고 싶다면 패키지 이름뒤에 @과 설치하고 싶은 버전 지정

b. Babel 프리셋 설치와 babel.config.json 설정 파일 작성

Babel 프리셋 

• Babel 프리셋 : @babel/preset-env 함께 사용되어야하는 Babel 플러그인을 모아둔 것
  • @babel/preset-env
  • @babel/preset-flow
  • @babel/preset-react
  • @babel/preset-typescript

Babel 프리셋 설치

• Babel 사용하려면 @babel/preset-env 설치해야함
• @babel/preset-env는 필요한 플러그인들을 프로젝트 지원환경에 맞춰 동적으로 결정
• 프로젝트 지원 환경은 Browserslist 형식으로 .browserslistrc 파일에 상세히 설정 가능
  • 만약 프로젝트 지원 환경 설정 작업을 생략하면 기본값으로 설정됨
  • 기본 설정은 ES6+/ES.NEXT 사양의 소스코드 변환

 

babel.config.json

• 설치 완료 시 프로젝트 루트 폴더에 babel.config.json 설정 파일을 생성하고 파일 내에 아래 코드 작성

c. 트렌스파일링

Babel CLI 명령어

• Babel 사용해 ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링 
• Babel CLI 명령어를 사용할수도 있으나 트랜스파일링할 때마다 매번 Babel CLI 명령어 입력해야함
  • => npm scripts에 Babel CLI 명령어 등록해 사용

npm scripts에 Babel CLI 명령어 등록해 사용

• package.json 파일에 scripts 추가
• npm scripts의 build는 src/js 폴더(타깃 폴더)에 있는 모든 자바스크립트 파일들을 트랜스파일링 후 그 결과물을 dist/js 폴더에 저장
• 사용한 옵션의 의미
  • -w : 타깃 폴더에 있는 모든 자바스크립트 파일들의 변경을 감지해 자동을 트랜스 파일(--watch 옵션의 축약형)
  • -d : 트랜스파일링된 결과물이 저장될 폴더 지정, 지정된 폴더가 없다면 자동 생성(--out-dir 옵션의 축약형)

 

트랜스 파일링 테스트

• private 필드 정의 제안에서 에러 발생
• @babel/preset-env가 현재 제안 단계에 있는 사양에 대한 플러그인 지원하지 않기 때문에 발생한 에러
• => 현재 제안 단계에 있는 사양을 트랜스파일링하려면 별도의 플러그인 설치 필요

d. Babel 플러그인 설치

• 설치가 필요한 Babel 플러그인은 Babel 홈페이지에서 검색 가능
• public/private 클래스 필드를 지원하는 @babel/plugin-proposal-class-properties 설치

• 설치한 플러그인은 babel.config.json 설정 파일에 추가

• 터미널에서 명령어 입력해 트랜스파일링 실행
• 트랜스 파일링에 성공하면 프로젝트 루트 폴더에 dist/js 폴더가 자동 생성되고 트랜스파일링된 main.js와 lib.js 저장

e. 브라우저에서 모듈 로딩 테스트

• 브라우저는 CommonJS 방식의 require 함수를 지원하지 않아 에러 발생 
• 브라우저의 ESM 사용하면 문제 생길 수 있고 이를 해결하기 위해 Webpack 사용

 

2. Webpack

Webpack

• Webpack : 의존관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나 또는 ㅇ러개의 파일로 번들링하는 모듈 번들러
• Webpack 사용 시 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더 필요 없음
• 여러개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서 script 태그로 여러개의 자바스크립트 파일을 로드해야하는 번거로운도 사라짐
• Webpack이 자바스크립트 파일 번들링 전 Babel 로드해 ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로 트래스파일링하는 작업 실행하도록 설정

a. Webpack 설치

b. babel-loader 설치

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

• npm scripts 변경해 Babel 대신 Webpack을 실행하도록 수정

c. webpack.config.js 설정 파일 작성

• webpack.config.js는 Webpack이 실행될 때 참조하는 설정 파일
• 프로젝트 루트 폴더에 webpack.config.js 생성 후 아래와 같이 작성

• 트랜스 파일링은 Babel이 수행하고 번들링은 Webpack이 수행

• Webpack 실행 결과 dist/js 폴더에 bundle.js 생성
• bundle.js : main.js, lib.js 모듈이 하나로 번들링된 결과물
• 아래처럼 index.html 수정 후 브라우저에서 실행하면 문제없이 실행됨

d. babel-polyfill 설치

• Babel 사용해 ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링해도 브라우저가 지원하지 않는 코드가 남아있을 수 있음
  • 예를 들어 Promise, Object.assign, Array.from 등은 대체할 기능이 없기때문
• 만약 구형 브라우저에서 대체할 수 없는 소스코드를 사용하려면 @babel/polyfill 설치

 

@babel/polyfill은 개발환경뿐만 아니라 실제 운영 환경에서도 사용해야함

• 개발용 의존성으로 설치하는 --save-dev 옵션을 지정하지 않음
• 1) ES6의 import 사용하는 경우 : 진입점의 선두에 먼저 폴리필 로드

• 2) Webpack 사용하는 경우 : webpack.config.js 파일의 entry 배열에 폴리필 추가

 

 

 

 

모던 자바스크립트 딥다이브 책을 정리한 내용입니다!!