React+TypeScript+Webpackの環境構築

2019.5.1

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です。

© 2019-2024 kwst.site.