바벨, 웹팩, 폴리필

HyosikPark·2020년 10월 29일

Javascript

목록 보기

23/26

바벨

npm i -D @babel/core @babel/cli
npm i @babel/preset-env : 필요한 플러그인들을 모아둔 것으로 프로젝트 환경에 맞춰서 동적으로 지원해준다.
.babelrc에 preset-env사용
트랜스파일링 : es6+ 코드를 es5이하로 트랜스파일링 package.json에 script "build": "babel src/js -w -d dist/js"
src/js 폴더에 있는 모든 ES6+ 파일들을 트랜스파일링 한 후 dist/js폴더에 저장한다는 의미.
-w : --watch의 축약형 타깃 폴더의 파일 변경을 감지하여 자동으로 트랜스파일 한다.
-d : 트랜스파일링된 결과물이 저장될 폴더를 지정 --out-dir의 축약형
트랜스파일링 테스트 : 플러그인을 preset-env에서 지원하지 않을 경우 별도로 설치해야함. 오류난 부분을 잘 살펴보면 추가해야할 플러그인을 제시해 줌
설치한 플러그인은 .babelrc파일에 추가.

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

현재까지의 바벨 설정은 nodejs환경에서의 CommonJS 방식에 따른 것이며 nodejs환경에서 동작한것이다.
브라우저는 CommonJS 방식의 module loading system을 지원하지 않기 때문에 브라우저에서는 에러가 난다.
이것을 해결하기 위해 웹팩이 필요하다.

웹팩

웹팩을 사용하는 이유는 파일을 하나로 합쳐 http요청을 효율적으로 하기 위함. 크로스 브라우징 대응, 압축
npm i webpack webpack-cli 설치. cli는 커맨드라인에 webpack 명령어를 사용할 수 있게 함
webpack.config.js 파일 생성 (ts일경우 js -> ts @types/webpack을 설치해야 함)

웹팩 옵션

resolve : {modules: ['node_modules'], extensions: ['.js','.json','.jsx','.css']} modules에 node_modules를 넣어야 노드모듈을 인식하고 extensions에 넣은 확장자들은
웹팩에서 인식하여 알아서 처리해 줌.
mode : development는 개발용 production은 배포용
entry : {name: '파일경로', ...} 웹팩이 파일을 읽어들이기 시작하는 부분 name 자유롭게 설정가능 app이면 app.js로 나옴 여러개 생성 가능
name: ['a.js','b.js'] 이렇게하면 a.js와 b.js가 app.js라는 결과물로 나옴
output: filename은 [name].js로 해야 entry에 설정한 이름으로 결과물이 나옴.
optimization : 최적화 관련 플러그인

loader

npm i -D babel-loader @babel/core @babel/preset-env

css 번들링

npm i -D style-loader css-loader mini-css-extract-plugin
css-loader는 css 파일들을 읽어주고 style-loader는 읽은 css 파일들을 style 태그로 만들어 head 태그 안에 넣어줍니다.
만약 style 태그 대신 css파일로 만들고 싶은 경우에 mini-css-extract-plugin을 사용하면 됩니다.

폴리필

npm i core-js regenerator-runtime
import "core-js/stable";
import "regenerator-runtime/runtime";

babel-loader설치 : webpack이 모듈을 번들링할 때 babel을사용하여 ES5 코드로 트랜스 파일링 해준다.
이제 script build를 webpack -w로 변경.

webpack.config.js
엔드리 아웃풋 바벨 등을 설정해주고 번들화된 파일을 스크립트로 실행

babel-polyfill

ES5로 대체할 수 없는 문법들은 트랜스파일되지 않는다.
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime-corejs3 실제환경에서도 사용하기 때문에 -D옵션은 쓰지 않음.
.babelrc 플러그인 설정 전역공간을 오염시키지 않는 폴리필 작동

Sass 컴파일

css를 번들에 포함시키는 방법
npm i node-sass style-loader css-loader sass-loader -D
node-sass: 노드 환경에서 사용할 수 있는 sass 라이브러리 Sass를 css로 컴파일 한다. 나머지는 웹팩 플러그인
css를 별도의 css파일로 분리하는 방법
npm i mini-css-extract-plugin