14.5 Parcel

parcel은 애플리케이션 번들러다. parcel을 사용하면 별도의 설정없이 간단히 모듈을 사용할 수 있어 편리하다.

다음 명령으로 parcel-project를 생성하고 parcel을 설치한다.

$ mkdir parcel-project && cd parcel-project
$ npm init -y
$ npm install parcel-bundler -D
$ code .

parcel-project에 다음과 같이 index.html, style.css, app.js, lib.js를 추가한다.

<!DOCTYPE html>
<html>
  <body>
    <h1>Parcel project</h1>
    <script src="app.js"></script>
  </body>
</html>
h1 {
  color: red;
}
// app.js
// Import a module using ES6 import syntax
import logger from './lib';
// CSS assets can be imported from a JavaScript or HTML file:
import './style.css';

logger();

// Import a module from a URL (e.g. CDN), using dynamic imports
import('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js').then(() => {
  console.log(_.VERSION);
});
// lib.js
export default () => {
  console.log('Hello world!');
};

package.json을 다음과 같이 수정한다. 별도의 설정없이 진입 파일(entry file)만 지정하면 바로 빌드할 수 있다.

{
  "name": "parcel-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.4"
  }
}

다음 명령을 실행하면 개발 모드로 애플리케이션을 기동시킨다. 이때 프로젝트 루트에 dist 디렉터리가 생성되고 개발 서버가 자동으로 기동한다. 개발 서버는 모듈을 자동 업데이트하는 HMR(Hot Module Replacement)이 내장되어 있다.

$ npm run dev

> parcel_exam@1.0.0 dev
> parcel index.html

Server running at http://localhost:1234
✨  Built in 6ms.

다음 명령을 실행하면 프로덕션 모드로 애플리케이션을 빌드한다. 이때 프로젝트 루트에 dist 디렉터리가 생성되고 빌드 결과물이 저장된다. 자동으로 uglify(난독화)와 minify(압축)을 자동 지원한다.

$ npm run build

> parcel_project@1.0.0 build
> parcel build index.html

✨  Built in 1.19s.

dist/app.c3af83f3.js        1.43 KB    190ms
dist/app.c3af83f3.js.map      457 B      2ms
dist/index.html               107 B    942ms

자바스크립트 파일에서 자바스크립트가 아닌 자산, 예를 들어 CSS, HTML, 이미지 파일 등을 가져올 수도 있다.

// CSS assets can be imported from a JavaScript or HTML file:
import './style.css';
// Import an HTML file
import html from './some.html'
// Import the URL to an image file
import imageURL from './cat.png'

Sass도 별도 설정이 없이 Sass만 설치하면 바로 사용할 수 있다.

Babel도 .babelrc와 같은 설정 파일이 존재하면 별도 설정이 없이 트랜스파일링된다. 이때 필요한 Babel과 프리셋 등도 자동 설치된다.

참고로 async/await를 사용하면 Uncaught ReferenceError: regeneratorRuntime is not defined 에러가 발생한다. 이때 다음과 같이 .babelrc에 플러그인을 설정하면 플러그인이 자동 설치되고 에러가 사라진다.

{
   "plugins": [
      ["@babel/plugin-transform-runtime"]
   ]
}
Back to top
Close