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"]
]
}