parcelを使ってReact+TypeScriptをビルドするまでの手順まとめ

Jul 1, 2020

ゼロからparcelを使ってReact+TypeScriptをビルドするまでの手順をまとめておく。

TypeScriptのセットアップ

TypeScriptをyarn addで入れる。

yarn add -D typescript

tscコマンドを使ってtsconfig.jsonを生成する。

yarn tsc --init

デフォルトのtsconfig.jsonはjsxに対応していないので設定を変える。 "compileOptions"の中の"jsx"を下のようにする。その他のキーはデフォルトのままでよい。

{
  "compilerOptions": {
    "jsx": "react"
  }
}

parcelの導入

まずparcelをyarn addで入れる。

yarn add -D parcel

適当なhtmlファイルを作ってparcelが動くか試してみる。

以下のようなsrc/index.htmlを作る。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
  </head>
  <body>
  </body>
</html>

htmlファイルをビルドする。以下のコマンドを叩くとビルドが成功してhttp://localhost:1234にアクセスできる。 index.htmlには何も書いていないので真っ白な画面が表示されるはず。

yarn parcel src/index.html

Reactをビルドする

ReactをTypeScriptで動かすために必要なものを入れる。

yarn add react react-dom @types/react @types/react-dom

Reactマウント先とエントリーポイントをindex.htmlに追加する。 Reactのエントリーファイルはsrc/main.tsxに書く。エントリーファイルのパスは相対パスで書いておけば良い。ビルド時にparcelがパス解決してくれる。

<body>
  <div id="app"></div> <!-- Reactアプリのマウント先 -->
  <script src="./main.tsx"></script> <!-- Reactアプリのエントリーポイント -->
</body>

src/main.tsxを以下のような内容で作成する。

import React from 'react';
import { render } from 'react-dom';

render(<div>test</div>, document.getElementById('app'));

yarn parcel src/index.htmlでアプリケーションを立ち上げて"test"と表示されれば成功。

所感

parcelを使うとconfigをほぼ書かずにReactを立ち上げることができた。webpackだったらwebpack.config.jsを作って、loaderを入れないといけない。parcelは楽。

今までは簡単なアプリでもcreate-react-appからプロジェクトを作成していた。 reate-react-appは簡単に作れるがsvg-loaderとかpwa関連のものとか、いらないものも入ってしまう。簡単なアプリを作るときはparcelを使ってサクッと立ち上げるのが良いと思った。