[Bundler] 개요와 Babel
1. 번들러 개요
- Parcel
- Webpack
- Rollup
web에서 동작할 수 있도록 변환해주는 역할
- HTML, CSS, JS
- 외부의 패키지의 도움을 받아서 변환(수동의 작업을 대신 해줌)
Parcel
- 구성없는 단순한 자동 번들링
- 소/중형 프로젝트에 적합
Webpack
- 매우 꼼꼼한 구성
- 중/대형 프로젝트에 적합.
2. 프로젝트 생성
reset css
web에서 동작할 수 있도록 변환해주는 역할
Parcel
Webpack
reset css
reset-css CDN by jsDelivr - A CDN for npm and GitHub
3. 정적 파일 연결
favicon 생성
favicon 생성
parcel plugin static files copy
- static pile에 접근하여 dist에 복사되도록 도와주는 플러그인(파비콘)
parcel-plugin-static-files-copy
npm i -D parcel-plugin-static-files-copy
// package.json
"staticFiles": {
"staticPath": "static"
}
4. autoprefixer
Vender Prefix
- 공급 업체 접두사
npm i -D postcss autoprefixer
"browserslist": [
"> 1%",
"last 2 versions"
]
- 전세계의 점유율이 1%인 모든 브라우저 + 마지막 2개버전 까지.
browserslist
- 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다. 그 명시를 Autoprefixer 패키지가 활용하게 됩니다.
- 어떤 브라우저에 서비스를 제공할 지 꼭 명시하기!
.postcssrc.js
- 앞에 . 이 붙으면 숨김파일
- browser에서 작동하는 것이 아닌 Node.js에서 작동.
- CommonJs 방식 사용
버전 충돌 시 다운그레이드 해주기
- autoprefixer vs postcss
npm i -D autoprefixer@9
5. babel
-
Babel은 주로 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러(변환)입니다
-
ES6, ES7, ES8 ===(BABEL)== > ES5(구형)
npm i -D @babel/core @babel/preset-env
// .babelrc.js
module.exports = {
presets: ['@babel/preset-env']
}
// package.json 에 이 내용이 꼭 있어야 함!
"browserslist": [
"> 1%",
"last 2 versions"
]
- async function 시 래퍼런스 오류를 막기 위해 plugin 설치
npm i -D @babel/plugin-transform-runtime
// babel에 추가
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
}
Author And Source
이 문제에 관하여([Bundler] 개요와 Babel), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@topgeun7913/Bundler-개요와-Babel
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Vender Prefix
npm i -D postcss autoprefixer
"browserslist": [
"> 1%",
"last 2 versions"
]
- 전세계의 점유율이 1%인 모든 브라우저 + 마지막 2개버전 까지.
browserslist
.postcssrc.js
버전 충돌 시 다운그레이드 해주기
npm i -D autoprefixer@9
-
Babel은 주로 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러(변환)입니다
-
ES6, ES7, ES8 ===(BABEL)== > ES5(구형)
npm i -D @babel/core @babel/preset-env
// .babelrc.js
module.exports = {
presets: ['@babel/preset-env']
}
// package.json 에 이 내용이 꼭 있어야 함!
"browserslist": [
"> 1%",
"last 2 versions"
]
- async function 시 래퍼런스 오류를 막기 위해 plugin 설치
npm i -D @babel/plugin-transform-runtime
// babel에 추가
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
}
Author And Source
이 문제에 관하여([Bundler] 개요와 Babel), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@topgeun7913/Bundler-개요와-Babel저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)