Parcel

Parcel은 웹 어플리케이션을 좀 더 간편하게(?) 빌드해주는 역할을 한다. (webpack과 같은 역할)
Benchmark 결과를 보면 parcel로 빌드 할 때 시간을 2~3배 단축할 수 있다.
현재 sungbin.dev 블로그를 만들 때 parcel로 React App을 빌드했다.

Parcel bulid 에러로 인해 현재는 webpack으로 빌드 되어있다.(21.05.22 수정)

하지만, react-syntax-highlighter 관련, import 시점에 따른 에러 해결이 까다로웠다.

import ReactDOM from 'react-dom';

async function startApplication() {
  await import('refractor');
  const { Router } = await import('./src/routes');
  ReactDOM.render(<Router />, document.getElementById('app'));
}
startApplication();

Parcel 프로젝트 생성 방법

npm init -y & 필수 패키지 설치

npm i --save react react-dom
npm i -D typescript parcel-bundler @types/react @types/react-dom

index.html

React App의 경우 script를 불러오는 시점이 #app div 다음이어야 한다.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hi</title>
  </head>

  <body>
    <div id="app"></div>
    <script src="./index.tsx"></script>
  </body>

</html>

App.tsx

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
      </div>
    );
  }
}

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "esModuleInterop": true,
  }
}

esModuleInterop 속성을 이용한 Import 에러 해결

parcel-bundler 설치 후에 node_modules/.bin/parcel 명령어로 parcel 사용 가능하다.

// package.json
// start 스크립트를 다음과 같이 사용할 수 있다.
  "scripts": {
    "start": "node_modules/.bin/parcel index.html -p 3001"
  },

parcel build 시 생성되는 dist 폴더를, 서버의 public 폴더로 symbolic link를 만들어서 유용하게 사용할 수 있다.

CRA 대신 Parcel 사용기

Parcel

Parcel 프로젝트 생성 방법