React+TypeScript+Webpackの環境構築

May 01, 2019

1記事/週のペースをなんとか維持できてます。このペースをずっと維持していきたいです。

Webフロントエンドの開発環境を構築する機会があったので作業ログ。

ちゃんとしたプロジェクトだとreact-create-appは使う気になれないので、毎回これめんどくさいんだけど毎回やってます。ボイラープレート作れって話だけど、ライブラリのトレンドとかその時々の状況によって変えたいのであえていつも0から構築するようにしてます。

ソースはここに置いてあります。

sandbox/webpack-react-typescript at master · SatoshiKawabata/sandbox · GitHub

パッケージのインストール

まず必要なパッケージをインストール。

npm i -D @types/react @types/react-dom ts-loader typescript webpack webpack-cli webpack-dev-server
  • @types/react: ReactのTypeScript定義モジュール
  • @types/react-dom: ReactDomのTypeScript定義モジュール
  • ts-loader: WebbpackでTypeScriptを読み込むためのモジュール
  • typescript: TypeScriptコンパイラ
  • webpack
  • webpack-cli
  • webpack-dev-server: 開発用のローカルサーバ
npm i react react-dom
  • react
  • react-dom

Webpackの設定

webpack.config.jsを作成して以下のように記述。

module.exports = {
  mode: 'development',
  entry: './src/index.tsx', // 最初に読み込むファイル
  output: { // build時に出力する先
    path: `${__dirname}/build`,
    filename: 'index.js'
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader'
      }
    ]
  },
  resolve: {
    extensions: [ // importできるファイルの拡張子
      '.ts', '.tsx', '.js', '.json'
    ],
  },
  devtool: 'inline-source-map',  // sourcemapを使えるようにする
  devServer: {  // 開発用のローカルサーバの設定
      contentBase: "./build",
      port: "8888"
  }
};

TyprScriptの設定

tsconfig.jsonを作成して以下のように記述。

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "lib": [
      "es2017",
      "dom"
    ],
    "allowSyntheticDefaultImports": true
  }
}

エントリポイント

src/index.tsxを作成して以下のように記述。

import React from "react";
import ReactDOM from "react-dom";

ReactDOM.render(
  <h1>hello react.</h1>,
  document.querySelector("#app")
);

実行

npm start

"hello react"が表示されればOKです。