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

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


今回は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'));


これで準備完了です。開発サーバーを立ち上げてみましょう。

$ yarn start

アプリケーションが立ち上がりました。Sassのスタイルも読み込まれてるのがわかります。
f:id:kamimura-dev:20191213202400p:plain

ここまで数ステップでReactの開発環境を作成できました。

ビルドしたいときは下記のコマンドでできます。

$ yarn build

最後に

最近だとちょっとしたライブラリの検証環境はCodeSandboxでも作ることができます。しかし自分の慣れたエディターでコードを書いたほうがストレスフリーなので、今後はParcelで開発環境を整えるのもありだと思いました。

codesandbox.io