CRA를 이용해 개발환경을 구축하던 습관을 버리고 babel과 webpack, typeScript같은 라이브러리를 직접 설치하며 개발환경을 구축한다

package.json 생성

client 폴더에 npm init 명령어를 사용하여 pakeage.json을 생성

이제부터 필요한 라이브러리들을 설치해나간다.

babel 설치

- babel이란?

JavaScript 컴파일러. ES6+이상의 JavaScript나 JSX, TypeScript코드를 하위버전의 JavaScript코드로 변환시켜 IE나 브라우저에서 동작할수 있는 역할을 한다.

우선 설치해야 할 라이브러리는 @babel/core와 @babel/clie이다.
babel/core는 babel이 파일을 트랜스할수 있게 해주며 babel/cli(Command Line Interface)는 babel을 실핼할 수 있게 해준다.
npm i @babel/core @babel/cli -D 로 설치 -D는 이 라이브러리들을 개발단계에서만 사용하겠다는 뜻이다. -D를 쓰지않으면 배포되어 설치했을때 이 라이브러리들이 같이 설치된다.

plugin과 preset

babel의 plugin은 실제로 코드를 변환시키는기능을 담당한다.
만약 ES6의 화살표함수나 블럭 스코프를 사용했다면 @babel/plugin-transform-arrow-functions 라이브러리와 @babel/plugin-transform-block-scoping 라이브러리의 설치가 필요하다.

이렇게 세세하게 나눠져 있는 plugin을 설치하기 번거로워 preset이 등장한다.
preset은 목적에 따라 plugin들을 모아놓은 라이브러리다.
@babel/preset-env 라이브러리는 targets 옵션으로 어떤 브라우저에도 유연하게 대응할 수 있기 때문에 가장 자주 쓰인다.
npm i @babel/preset-env -D 으로 설치한뒤 babel.config.js 파일을 만들어 내가 preset을 사용하겠다는 것을 선언해야 한다.

useBuiltIns는 polyfill을 사용할 것인지 아닌지 선택하는 옵션이다 .
polyfill은 babel이 하는 컴파일러의 역할을 도와준다. 런타임에 필요한 기능을 주입하는 것으로 브라우저가 실행되는 시점에 필요한 기능을 주입한다.
corejs는 useBuiltIns 옵션이 활성화 되어있을때 적용 가능하며 2는 업데이트가 중단되어 3을 사용하는 것이 좋다.

webpack

webpack은 entry파일을 지정해서 entry파일이 의존성을 띄고 있는 모듈들을 하나로 묶어내는 라이브러리다.

npm i webpack webpack-cli -D로 설치후 번들링할 js파일을 만든다.

entry옵션은 번들링의 시작점이 될 파일을 설정하는 옵션이다. 배열이나 객체의 형태로 여러개의 entry를 지정할 수도 있다.
output옵션은 번들링이 완료된 파일에 대한 옵션이다. output.path는 번들링된 파일이 저장될 위치이고 filename은 파일이름이다.
devtool 옵션은 여러 종류의 source-map 중 하나를 입력 할 수 있다. source-map은 번들링 된 코드의 원본 위치를 알려주는 역할을 한다.
mode 옵션은 "projuction" | "development"중 하나로 배포용 | 개발용 으로 나누어서 코드를 최적화시켜주는 역할을 한다.

npx webpack으로 webpack을 실행해보자

dist폴더에 bundle.js가 생성된다 이 bundle.js를 script로 불러온다.

위와같이 powedA가 잘 출력되는 것을 확인할 수 있다. source-map덕분에 console.log가 main.js:6에서 발생한 것도 알 수있다!

loader