본문 바로가기
Bundler

Parcel Bundler 사용해보기

제이널 2022. 1. 18. 17:39

 

번들러는 모듈 파일들을 실제 웹사이트에서 사용할 수 있도록 파일들을 변환하고 묶어주는 프런트엔드 개발 도구입니다.

최신 번들러의 종류는 Webpack, Parcel, rollup 등이 있으며, 이 중 Parcel 번들러에 대해 간략히 알아보려 합니다.

 

1. Parcel Bundler

 

 

2017년에 출시된 번들러로써, webpack에 비해 쉬운 설정, 빠른 빌드, 번들러에 대한 러닝커브가 작다는 장점이 있습니다. Parcel의 특징을 요약하면 아래와 같습니다.

  • 빠른 빌드 실행: 별도의 설정 없이 바로 빌드가 가능합니다.
  • 빠른 번들 속도: 멀티코어 컴파일, 캐싱을 이용한 빠른 리빌드를 지원합니다.
  • Assets 기반 번들링: HTML, CSS, JS 같은 특정 유형의 애셋을 지원합니다. 비슷한 유형의 애셋은 같은 번들로 출력하고 다른 유형의 애셋은 자식 번들로 만들어 부모 번들에 참조합니다.
  • 자동 변환: babel, autoprefixer와 같은 트랜스파일러들을 내장하여 지원합니다.
  • HMR(Hot Module Replacement): 런타임 중 모듈이 변경되면, 페이지를 새로고침 하지 않아도 모듈을 업데이트 합니다.
  • 코드 분할: import()를 사용하면, 코드를 분할하여 빌드합니다.
  • 제품화: HTML, CSS, JavaScript 같은 특정 유형의 애셋을 지원합니다. 비슷한 유형의 애셋은 같은 번들로 출력하고 다른 유형의 애셋은 자식 번들로 만들어 부모 번들에 참조합니다.

 

참고

https://heropy.blog/2018/01/20/parcel-1-start/

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

 

2. Parcel 설치 & 프로젝트 생성

먼저 프로젝트 디렉터리를 만들고, parcel을 설치합니다.

mkdir parcel-test && cd parcel-test
npm init
npm i -D parcel-bundler

 

package.json의 scripts 항목에 내용을 추가해서 npm run에 사용할 사용자 정의 명령어를 설정합니다.

{
  ...,
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  ...
}

 

다음으로 테스트 할 index.html, main.scss, main.js 파일을 만듭니다.

 

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>Parcel Bundler</title>

    <!-- Reset CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

    <link rel="stylesheet" ref="./scss/main.scss">
    <script defer src="./js/main.js"></script>
</head>
<body>
    <h1>Hello, Parcel!</h1>
</body>
</html>

 

main.scss

$color--black: #000;
$color--white: #fff;

body {
    background-color: $color--black;
    h1 {
        color: $color--white;
    }
}

 

main.js

console.log('hello');

 

이제 parcel을 실행하고, 브라우저에서 잘 나오는지 확인해 봅니다.

PORT=8080 npm run dev

 

이제 dist 폴더를 확인해 보면 Parcel이 변환한 파일을 확인할 수 있습니다.

 

3. autoprefixer

  • 표준 CSS를 사용하지 않는 구형 브라우저에서도 최신 CSS 기술이 사용될 수 있도록 속성을 자동으로 붙여주는 패키지입니다.

먼저 postcss와 autoprefixer 패키지를 설치합니다.

$ npm i -D postcss
$ npm i -D autoprefixer@9

- autoprefixer@9: autoprefixer 패키지를 9 버전으로 설치합니다. postcss 패키지와 버전 충돌이 나기 때문입니다.

 

다음으로, package.json 파일에 browserslist 옵션을 추가해서, NPM 프로젝트에서 사용할 브라우저의 범위를 명시해 줍니다.

{
  ...,
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  ...
}

- "> 1%": 전 세계 브라우저 점유율이 1% 이상인 브라우저를 대상으로 지원하겠다는 옵션

- "last 2 versions": 그 브라우저의 최근 2개의 버전까지를 대상으로 지원하겠다는 옵션

 

다음으로, .postcssrc.js(postcss Runtime Configuration) 파일을 생성하고, 내용을 추가합니다.

.postcssrc.js 파일을 만들면, Parcel이 자동으로 이 파일을 불러와서 내용을 적용합니다.

// ESM
// CommonJS

// import autoprefixer form 'autoprefixer';
const autoprefixer = require('autoprefixer');

// export {
//   plugins: [
//       autoprefixer
//   ]
// }
module.exports = {
    plugins: [
        autoprefixer
    ]
}

 

이후에 css 파일에서 element에 display:flex; 속성을 부여하면, 아래와 같이 autoprefixer에서 flex에 대한 속성을 추가해 주는 걸 확인할 수 있습니다.

 

4. Babel

  • ECMAScript 2015+(ES6) 코드를 이전 JavaScript 엔진에서 실행할 수 있도록 변환해주는 패키지입니다.

 

먼저, 바벨과 플러그인을 설치해 줍니다. ( postcss가 없다면 먼저 설치해 줍니다 )

$ npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

- @babel/plugin-transform-runtime: async/await 문법을 위한 플러그인입니다.

 

다음으로, .babelrc.js 파일을 생성하고 아래 내용을 추가합니다. .postcssrc.js와 마찬가지로 .babelrc.js 파일도 Parcel이  파일을 자동으로 불러와서 내용을 적용합니다.

module.exports = {
    presets: ['@babel/preset-env'],
    plugins: [
        ['@babel/plugin-transform-runtime']
    ]
}

 

이제 모듈을 빌드하면, async/await 문법을 사용해도 이를 지원하지 않는 브라우저와 호환되도록 변환되어 번들링됩니다.

async function test() {
  const promise = Promise.resolve(123);
  console.log( await promise );
}

test();

 

5. CLI(Command Line Interface)

  • 터미널에서 parcel 명령어를 사용할 수 있습니다.
  • Parcel 공식 문서에서 CLI 옵션을 확인할 수 있습니다( https://ko.parceljs.org/cli.html )
  • 개발용 서버 시작
    •  
    • $ parcel index.html
  • 프로덕션 애셋 빌드: 배포용 빌드를 합니다. 
    • parcel build index.html
  • 결과물 디렉토리: default로 dist 폴더에 번들링되지만, 결과물이 담기는 경로를 다른 경로로 변경할 수 있습니다. 
    • parcel build index.html -d build/output
  • 개발 서버 포트 변경 
    • parcel serve index.html --port 1234
  • 브라우저에서 열기: 개발 서버를 시작하면, 브라우저에서 자동으로 열립니다. 
    • parcel index.html --open
  • HMR 비활성화: 모듈의 변경사항을 감지해 즉시 반영되는 기능인 HMR을 비활성화 합니다. 
    • parcel index.html --no-hmr
  • 파일시스템 캐시 비활성화: 캐시가 되어 있으면, 캐시된 내용을 사용해서 빌드가 더 빠르게 되지만, 캐시된 내용 때문에 문제가 발생할 경우 캐시를 비활성화해서 빌드할 수 있습니다. 
    • parcel build index.html --no-cache

 

 

 

'Bundler' 카테고리의 다른 글

Webpack Bundler 사용해보기  (0) 2022.01.19
Module Bundler란?  (0) 2022.01.18

'Bundler' Related Articles

티스토리툴바