번들러(Bundler) Parcel

번들러의 종류 : Parcel, Webpack, Rollup ...

 

순수하게 HTML, CSS, JS를 가지고 웹페이지를 만드는데 있어서는 비효율적인 부분이 있기 때문에 다양한 라이브러리를 사용해 작성하게 되지만, 그 라이브러리들이 직접 그 기능을 수행하는게 아니고 그 라이브러리를 통하여 작성된 코드를 가지고 다시 HTML, CSS, JS로 변환하는 작업을 거쳐 웹페이지가 작성된다. 

 

 

각 라이브러리를 번들러를 통하여 동작할 수 있도록 변환시켜준다. 하지만 번들러가 모든 것을 변환시켜줄 수 없기 때문에 외부 패키지(ex. sass, postcss, typescript, @babel/core, vue-template-compiler 등을 자동으로 설치해준다.

 

 

Parcel : 구성 옵션 없는 단순한 자동 번들링, 소/ 중형 프로젝트에 적합

Webpack : 매우 꼼꼼한 구성, 중/ 대형 프로젝트에 적합

 

 

 

 

 

 

 

 

 

원래의 index.html, css, js 파일이 parcel bundler를 통해 변환되어 dist라는 폴더로 들어가 있는 것을 볼 수 있다. 

 

우리가 웹 페이지에서 확인하게 되는 파일은 dist 폴더의 index.html 파일이고, 그것을 만들기 위해 원래의 index.html 파일을 parcel bundler가 사용하는 것이다 !

 

 

favicon이 보이지 않을 때, 이 파비콘을 dist 폴더 안에 넣어주면 웹 페이지에서 안 보이던 favicon도 볼 수 있는데,

이 dist라는 폴더 자체가 parcel bundler의 개발 서버 실행을 통해서 새로 생성하고 지울 수도 있어야 하기 때문에 계속 필요한 resource, 파일을 dist 폴더로 직접 이동하는 것 자체는 바람직하지 않다 !!

해당되는 파일이나 resource를 개발 서버를 열거나 제품화시킬 때 dist 폴더로 자동으로 넣어줄 수 있는 패키지를 사용하는 것이 좋다. 

 

https://www.npmjs.com/package/parcel-plugin-static-files-copy

parcel-plugin-static-files-copy

 

 

 

 

 

 

 

터미널에서 npm i -D parcel-plugin-static-files-copy를 입력하여 패키지를 설치하고,

package.json 파일에 새로운 옵션으로 위에 빨간 박스와 같이 입력하여 옵션을 추가하여 준다 !

 

 

 

 

위에 "devDependencies"라고 추가된 패키지 항목에 parcel-plugin-static-files-copy를 볼 수 있고,

이 패키지가 프로젝트 구조에 static이라는 이름의 폴더를 dist 폴더로 복사, 붙여넣기 해주겠다는 이야기이다.

 

그래서, 관리하고자 하는 파일(여기에서는 favicon)을 static이라는 이름의 폴더를 만들어 그 곳에 넣어두면 되겠다.

 

 

 

 

 

 

 

패키지 설치& 설정 후 개발서버를 다시 열어보면, 위와 같이 static 폴더를 만들어 넣어둔 favicon.ico 파일이 dist 폴더에 동일하게 복사되어 생성된 것을 확인할 수 있다 ! (정적 파일 연결됨)

 

 

 

 

 

cf. 구형 브라우저여서 표준 기술이 동작하지 않을 수 있는 경우에는, 표준 기술 앞에 공급 업체 접두사(Vender Prefix)를 붙여서 작성해 표준 기술이 작동하지 않을 수 있는 것도 대응하게 작성할 수 있다.  ex) webkit, ms

이런 벤더 프리픽스를 자동으로 붙여주는 패키지로 autoprefixer, postcss가 있다.

 

 

 

 

 

 

 

한꺼번에 여러 개의 패키지를 설치할 때는 띄어쓰기로 구분하여 패키지 이름을 작성해주면 된다 !

 

 

 

 

 

 

 

 

browserslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 옵션이다. 그것을 autoprefixer 패키지가 활요할 것이다. 

 

 

 

 

 

위의 browserslist 옵션의 옵션값

 

"> 1%" ㅡ 전 세계의 점유율이 1%로 이상인 브라우저를 의미

"last 2 versions" ㅡ 해당 브라우저의 마지막 2개의 버전까지는 지원하겠다는 의미

 

 

 

 

 

.postcssrc.js 파일을 프로젝트 폴더에 만들어 준다.

 

 

cf. 앞에 .이 붙는 파일은 구성옵션이나 숨김 파일을 의미

    뒤에 rc(Runtime Configuration)가 붙은 파일은 구성 파일을 의미

 

 

 

JS는 브라우저 환경에서 동작하거나 node.js 환경에서 동작하는데,

환경에 따라 모듈을 불러 들일 때나 내보낼 때 작성 방식이 다르다. 

 

 

 

 

 

 

 

 

개발서버를 다시 실행해 보면 postcss plugin autoprefixer requires postcss 8 이라는 에러가 발생할 것이고,

에러노트에 작성한대로 autoprefixer를 다운그레이드하면 해결되어 잘 작동이 되어질 것이다. 

 

 

 

 

 

 

 

 

Babel

 

https://babeljs.io/

Babel · The compiler for next generation JavaScript

 

 

 

 

 

자바스크립트의 표준을 ECMA Script라고 하는데, ES라고 줄여 말하기도 한다.

 

 

 

2015년에 새로 나온 버전을 ES6라고 하는데 ES6를 기준으로 그 이전은 구버전이라고 보고 ES6를 포함 이후의 버전은 현재 주로 사용되고 있는 최신 버전이다.

 

 

최신의 문법이 구형 브라우저에서 동작하지 않는 경우, Babel을 통하여 ES5 버전 문법으로 변환(컴파일)해줄 수 있다.

 

 

 

 

 

 

바벨 관련 패키지를 위와 같이 두 개 설치해주고, 

 

 

 

 

 

.babelrc.js 파일을 새로 만들어, 위와 같이 js 파일을 작성해준다.

Babel도 Postcss와 마찬가지로 browserslist 옵션을 활용한다. 

 

 

 

 

 

 

 

 

Parcel 번들러 소개 페이지

 

https://ko.parceljs.org/

Parcel – The zero configuration build tool for the web.

 

 

 

 

Parcel 번들러를 통해서 CLI로 입력할 수 있는 명령어들

개발용으로 Parcel 번들러를 사용할 때와 제품화할 때 사용할 때로 번들러 사용하는 법이 나눠진다. 

 

 

https://ko.parceljs.org/cli.html

🖥 커맨드 라인 인터페이스(CLI)

 

 

 

cf. HMR : Hot Module Replacement 빠른 모듈 교체 는 

               런타임에 페이지 새로고침 없이 수정된 내용을 자동으로 갱신하는 방식을 말한다.

 

 

 

 

Parcel CLI를 통해 세세하게 설정하거나 작업할 필요가 있을 때 조작할 수 있겠다. 

 

 

 

 

 

ex. 포트번호 변경 옵션 ㅡ --port (원하는 포트 번호)