번들러란?
쉽게말해서 리액트,scss등으로 작업한 결과물을 html, css, js로 변환해주는것
번들러중에는 Parcel이라는 번들러가 있고 웹팩 번들러에 비해 정해져있는편이라 소형프로젝트를 할때 유용하다.
바벨?
Babel is a free and open-source JavaScript transcompiler that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript that can be run by older JavaScript engines. Babel is a popular tool for using the newest features of the JavaScript programming language.
바벨을 모른다면 프론트앤드를 모른다고 할수 있을 정도로 중요함!!
바벨이란 간단하게말하면 자바스크립트 컴파일러(es6 -> es5)를 해야 모든 브라우저와 서버가 읽을 수 있음
노드js에서도 필요
리액트의 jsx를 읽기위해서도 필요
1. 설치
npm프로젝트생성
npm init -y파셀번들러 설치
npm install -g parcel-bundlerpostcss와 autoprefixer(구형웹브라우저에도 호환가능하게 도와줌)
npm i -D postcss
npm i -D autoprefixer만약 실행도중에 버전때문에 충돌이날경우 autoprofixer를 10버전->9버전으로 낮춰주면해결됨
npm i -D autoprefix@9
바벨설치
npm i -D @babel/core @babel/preset-env
npm i -D @babel/plugin-transform-runtime
2. 파일준비
package.json에 코드추가(전세계 점유율이 1%이상인 모든 브라우저에 마지막2개버전까지는 지원해주겠다는 의미)
,
"browserslist":[
"> 1%",
"last 2versions"
]package.json에 scripts코드 변경
"scripts": {
"dev": "parcel index.html",
"build":"parcel build index.html"
},
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./scss/main.scss">
</head>
<body>
<h1>hello parcel</h1>
</body>
</html>주의할점은 main.scss가 실행되기전에 reset-css가 동작해야함
scss/main.scss
$color--black:#000;
$color--white:#fff;
body{
background-color: $color--black;
h1{
color:$color--white;
display:flex; //autoprefixer test
}
}
js/main.js
console.log('Hello parcel!')
async function test(){
const promise = Promise.resolve(123)
console.log(await promise)
}
test()
.postcssrc.js
const autoprefixer = require('autoprefixer')
module.exports = {
Plugin:[
autoprefixer
]
}.babelrc.js
module.exports = {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime']
]
}3. 실행
npm run dev
dist폴더가 생성되고 제공된 http://localhost:1234서버에 들어가보면 scss와 js의 최신버전문법이 잘출력됨을 확인할수있다.
https://www.jsdelivr.com/package/npm/reset-css
4 재사용(degit)
새로운프로젝트를할때마다 번들러를 또 설정할필요없이 지금만들어논 번들러를 깃헙에 올려두고나서 재사용할수있다.
직접 파일을 다운로드받아서 재사용해도되지만 degit을 활용하면 더 빠르게 재사용이 가능하다.
degit은 깃헙에있는 원격저장소를 현재 경로에다가 다운받을수있는 기능제공. 원래 다운로드를 해야하지만 nodejs환경이면 npx명령어를 통해 다운받지않고 사용할 수 있다.
npx degit 깃헙계정이름/저장소이름 만들고싶은폴더이름
cd 방금만든폴더명
code . -r 여기visualstudio에서 그 폴더 열기
jsDelivr - A free, fast, and reliable CDN for Open Source
Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use.
www.jsdelivr.com
GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint a
🦔 Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env - GitHub - browserslist/browserslist: 🦔 Share target browsers between different front-en...
github.com
단, favicon의 경우 루트가 달라 적용되지않으니 static폴더를 만들어서
parcel-plugin-static-files-copy라는 패키지의 도움을 받아야하는데 자세한 부분은 구글검색
https://github.com/browserslist/browserslist#readme
코드보기
https://github.com/LeeEugene1/parcel-template-basic
GitHub - LeeEugene1/parcel-template-basic
Contribute to LeeEugene1/parcel-template-basic development by creating an account on GitHub.
github.com
'Frontend > Bundler' 카테고리의 다른 글
| 웹팩에러 There are multiple modules with names that only differ in casing. (0) | 2022.05.23 |
|---|---|
| [해결중] 0 velerabilities 만들기 (0) | 2021.09.23 |
| 웹팩 최소설정으로 리액트 개발환경 (0) | 2021.04.13 |
