手動でWebpackを使ったTypeScriptとReactの環境を整備する方法

Programming
目次

概要

TypeScriptを使ったReactを利用するということがあったので、それについて書いていきます。

今回私の環境では、モジュラーバンドラーとしてWebpackをを利用しました。

環境

  • ts-loader 9.2.5
  • typescript 4.4.2
  • webpack 5.51.2

考え方

基本的な考え方として、モジュラーバンドラーであるWebpackを利用して、Reactを利用しているTypeScriptのコードをJavaScriptに変換しています。そもそもJavaScriptに変換しているのは、ブラウザでTypeScriptを利用することができないからです。

また、モジュラーバンドラーであるWebpackについて、Webpackだけでは変換はできず、専用のloaderというものを利用します。

そのため順番として、必要なツールのインストール、Webpackの設定の順で進みます。最後には、簡単に動作確認のためのコードも用意します。

ツールのインストール

npmコマンドを利用します。次のように実行します。

npm install --save-dev webpack ts-loader typescript
npm install --save react

これで、ツールのインストールは終わりです。

Webpackの設定

Webpackの設定をする前に、プロジェクトのディレクトリ階層について整理します。

今回想定する使い方として、Reactを使ったコードなどは、webpack/src/以下にあるとします。また、今回はapp.tsという名前のファイルを用意しました。さらに、設定ファイルはwebpack/config/webpack.config.jsという名前であります。変換したファイルの保存先は、js/以下です。

このような前提のもとに、次のようなファイルを作成します。

module.exports = {
  entry: {
    app: './webpack/src/app.ts',
  },
  output: {
    path: `${__dirname}/../../js/`,
    filename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [
      '.ts', '.js', '.tsx', '.json',
    ],
  },
};

設定ファイルの意味として、entryには、変換したいファイルを記述しています。ファイルの数だけここに設定を追加します。appのようなハッシュのキーの部分は次のoutputに関連します。

outputでは、変換後のファイルをどこに保存するかを指定します。pathで保存場所、filenameで保存の際のファイル名を指定します。[name]はentryに記述したハッシュキーの部分に自動で置換されます。

moduleやresolveは、webpackで変換する際にどのようなloaderを用いるかなどの設定です。

これで、Webpackの設定は終わりです。

次に、TypeScriptの設定をします。TypeScriptからJavaScriptへのトランスパイル時に、いくつかのオプションを設定することができます。この設定は、tsconfig.jsonという名前でpackage.jsonファイルがある場所と同じ場所に記述します。今回はつぎのようにしました。

{
  "compilerOptions": {
    "sourceMap": true,
    "strict": true,
    "target": "ES2015",
    "module": "ES6",
    "jsx": "react-jsx",
    "moduleResolution": "node",
    "lib": [
      "ES2020",
      "DOM"
    ]
  }
}

最後に、実行のためのコマンドを楽に実行できるように設定をします。

今回は、package.jsonのscriptsの部部に次のように記述しました。

"scripts": {
    "build": "webpack --config webpack/config/webpack.config.js",
    "build:watch": "webpack -w --config webpack/config/webpack.config.js"
}

これで、全ての準備が終わりました。

実行

うまくいったかどうかを動かすプログラムとして、次のものを用意しました。

import React from "react";

class App extends React.Component {
  render() {
    return (
      <div className="main">
        <TestProblemApp/>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.getElementById("app"));</code></pre>

最初に、reactパッケージからインポートして利用します。

ビルドは、次のコマンドでします。

# 一回だけビルドするとき
npm run build
# ファイルの変更を監視して、変更時にビルドしたいとき
npm run build:watch</code></pre>

これで、全ての作業は終わりです。

さいごに

Vue.jsよりもはまりどころがないという印象です。昔Vue.jsをTypeScriptで利用したいとなったときのはまりどころと比べると、とても楽でした。