js 하다보면 근 1년사이 너무 많이 뭔가 나온다.
웹팩 친척인가... 대항마인가 라이벌인가 뭔가 모르겠지만.
parcel - 꾸러미 (파셀? 파스-얼? 파쉘? 파스엘? 파쒀얼??) 라는 새로운 모듈 번들러가 나왔다.
구글번역 최고
git : https://github.com/parcel-bundler/parcel
일단 써보고...판단해야지.
퀵가이드 따라 한 메모.
설치
🤖 parcel-test npm install -g parcel-bundler
parcel-test 폴더 하나 만들었고. 일단 난, npm 쓰니까, 글로벌로 꾸러미 설치하고...
package.json 생성.
🤖 parcel-test npm init -y
기본 셋으로 빠르게 생성.
.. 뭐 모든 종류 파일을 엔트리로 지정할 수 있다는데... php도 되나보네. 근데 js나 html이 좋다고 써져있다.
html 파일, js 파일 생성
간단하게 src에 index.js (콘솔로그정도) 와 index.html 만들고.
그냥 이대로 콘솔창에
🤖 parcel-test parcel index.html
Server running at http://localhost:1234
✨ Built in 305ms.
라고 입력했더니 뭐 빌드 하고 서버도 띄웠네..
폴더구경
dist 폴더 만든적이 없는데, dist 폴더가 생겼다. 지정해 준 기억도 없다.
js도 같이 들어갔다는 점.
번들된 dist 내부의 index.html을 열어보면(오른쪽) 잘 만들어져있다.
포트변경은
parcel [목적파일] -p [포트번호]
후기
1. 간단하네. 심플 프로젝트 용으로 괜찮겠다. parcel만 앞에 붙이면 [개발서버+빠른번들링]
2. 버그인ㅈㅣ모르겠는데, python airflow 8080에 띄워놓았는데, parcel로 8080 띄우니까, 에러안나고 꾸러미 우선 올라가더라.
-airflow 미아되어버림.-
이건 좀 더 ㄴㅏ중에 파이선써버와 어떤 관계가 있길래 중복으로 뜨는지 알아봐야지.
꾸러미 끄니까, airflow로 다시 붙음. -_-? 왜???????? 왜일까..
3. watch 옵션 붙이지 않아도 기본적으로 꾸러미 로컬 개발 환경에서는 watch 하고 있다.
별도로 서버를 구축해서 사용하는 경우 watch 옵션을 붙여주면, 꾸러미 내부의 개발서버 띄우지 않고 watch 만 할 수 있었다.
parcel watch [목적파일] // Won't use hot module server.
분명 watch 해놓고 왜 서버 안뜬다고 할 사람 있을 것 같다.
총평
간단하네.
빠른지는 아무것도 안넣어서 잘 모르겠다...
기타.
✨ Production
When it comes time to bundle your application for production, you can use Parcel's production mode.
parcel build entry.js
프로덕션... 설명... 간단해...
앞으로 찾아야 할 것
1. webpack.config.js 같은 것은 없나?
2. 외부라이브러리 설치 후 모듈 import 도... 진짜? 간단해??
3. [ CSS, other compile-to-CSS languages like LESS, SASS, and Stylus ] 가 들어 있다는데, 상세옵션을?? 어떻게??
빠른 분들 나오자마자 리엑트용 보일러 플레이트를 내어놓았다.
https://github.com/rwieruch/parcel-react
아직 parcel-vue 는 없다. vue-loader .vue 파일이 문제인 듯.
1.0.0 기반으로 작성 됨.
끝.