라쿤의 끄적끄적

Bundler02 Babel npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-env : js의 기능을 한번에 지원하는 패키지 (배열 형태로 넣음) plugins : (2차원 배열로 넣어야 함, 배열안에 배열이 들어 있는 형태) @babel/plugin-transform-runtime : 비동기 처리를 위한 패키지 .babelrc.js 파일 module.exports = { presets: ["@babel/preset-env"], plugins: [["@babel/plugin-transform-runtime"]], }; webpack.config 파일에 rules에 js 파일에 대한 로더를 붙여 줘야 함..

Bundler01 여러가지 개발할 때 필요한 라이브러리, 프레임 워크 등의 결과를 브라우저가 인식할 수 있도록 변환해 줌 번들러 자체가 변환해주는 것은 아니고, 해당 라이브러리, 프레임워크등이 가진 변환 패키지들을 번들러가 관리해서 변환을 도와주고 웹에서 동작까지 시킴 Parcel vs Webpack Parcel 구성 없는 단순한 자동 번들링 소/중형 프로젝트에 적합 Webpack 매우 꼼꼼한 구성 중/대형 프로젝트에 적합 Parcel 프로젝트 생성 npm init -> 프로젝트 시작 npm i -D parcel-bundler -> 번들러 개발 의존성으로 설치 package.json 파일 script 수정 "dev": "parcel index.html" "build": "parcel build index..