Parcelを使って数ステップでReact + TypeScriptの開発環境を構築する

こんにちはかみむらです。フロントエンド開発でのモジュールバンドラの第一候補はwebpackだと思います。webpackは柔軟に対応できるオプションやパフォーマンスを考慮したライブラリが充実しています。しかし非フロントエンドエンジニアにとっては学習コストが非常に高く、一からwebpackを設定するのは容易ではありません。そんなときに役立つのがParcelです。Parcelは設定ファイルが必要なく、npmコマンドのみでビルドや開発サーバーを立ち上げることができます。もちろんSassやTypeScriptにも対応しています。

今回はReact + TypeScriptの環境 +α Sassの開発環境を立ち上げていきます。
それでは開発環境を整えていきましょう。

今回書いたコードはこちらにあります。
github.com

ドキュメント
https://parceljs.org/

プロジェクトの作成

空のフォルダを作成して、初期化していきます。

$ mkdir my-app
$ yarn init -y

プロジェクトのセットアップ

まずはParcelをインストールしていきます。

$ yarn add -D parcel-bundler

次にReactの開発に必要なライブラリをインストールします。

$ yarn add react react-dom

そして、TypeScripでビルドするために必要なライブラリをインストールします。

$ yarn add -D typescript @types/react @types/react-dom

こちらはTypeScriptでビルドするための設定ファイルの内容です。
tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "jsx": "react",
    "rootDir": "./src",
    "experimentalDecorators": true,
    "lib": ["dom", "es2015"]
  }
}

package.jsonに開発サーバーを立ち上げるコマンドと、ビルドするためのコマンドを追加します。

  "scripts": {
    "start": "parcel ./src/index.html -p 3000 --open",
    "build": "parcel build ./src/index.html"
  }

ここでは-pと--openオプションを指定しています。

-pは開発サーバーのポートを指定しています。

--openは開発サーバーの立ち上げ時に、ブラウザを開くオプションを付けています。

必須ではありませんが、開発時に役立つオプションです。

アプリケーションをセットアップ

srcフォルダを作成して、エントリーポイントになるindex.htmlを作成します。

$ mkdir src

こちらがindex.htmlの内容です。index.tsxを読み込んでいます。
src/index.html

<!DOCTYPE html>
<html lang="ja">
  <title>react-typescript-percel</title>
    <body>
      <div id="root"></div>
      <script src="./index.tsx"></script>
    </body>
</html>

Sassを使うときに必要なライブラリをインストールします。

$ yarn add -D sass

そして、Sassファイルを作成します。
src/index.scss

body {
  color: red;
}

次にindex.tsxの内容です。ここではReactのロジックを書きます。先ほど作成したSassファイルを読み込みます。

src/index.tsx

import React from 'react';
import { render } from 'react-dom';
import './index.scss';

const App: React.SFC = () => (
 <div>App</div>
);
render(<App />, document.getElementById('root'));