webpackでTypeScript開発環境を構築しよう


今やフロントエンドエンジニアの必須スキルであるTypeScript。

この記事ではwebpackによるTypeScript開発環境構築をハンズオン形式で行なっていきます。

Contents

動作環境と前提条件

動作環境

macOS Monterey v12.3.1
VSCode（テキストエディタ）
Node.js v16.14.2
yarn v1.22.18
npm v8.5.0
Google Chrome（ブラウザ）

前提条件

Node.jsがインストールされていること

ゴール

ファイル保存時に、ブラウザのホットリロードとTypeScriptのコンパイル監視が実行され、コードの実行結果が反映されているのを確認する。
本番用ビルドファイルを出力する。

ソース

GitHubリポジトリ

https://github.com/posipan/ts-dev

ディレクトリ構成

./ts-dev
├── README.md
├── package.json
├── public
│   └── dist
│       └── index.html
├── src
│   └── ts
│       ├── addNum.ts
│       └── index.ts
├── tsconfig.json
├── webpack.config.js
└── yarn.lock

※上記にnode_modulesやアウトプットJSファイルであるpublic/dist/main.jsは含まれていませんが、後の工程で作成されます。

必要なパッケージのインストール

Node.jsのパッケージマネージャーにはnpmとyarnがありますので、お好きな方をお選びください。今回はyarnで記述します。

package.jsonの作成

ルートディレクトリにpackage.jsonを作成します。

yarn init -y

以下のような内容でpackage.jsonが作成されました。

{
  "name": "ts-dev",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

TypeScriptコンパイラーやwebpackのインストール

続いてTypeScriptコンパイラーやwebpack関連パッケージをインストールします。

yarn add -D typescript ts-loader webpack webpack-cli webpack-dev-server

各パッケージの説明は以下の通りです。

パッケージ名	説明
typescript	TypeScriptコンパイラー
ts-loader	webpackでTypeScriptコンパイラーを動かす
webpack	ES ModulesのJSファイルを1つのJSファイルにまとめるモジュールバンドラー
webpack-cli	コマンドからwebpackを動かす
webpack-dev-server	ホットリロードを提供する開発用webサーバー

各種設定ファイルの作成

webpack.config.jsの作成

webpack.config.jsはwebpackの機能を拡張するための設定ファイルです。

エントリーポイントやアウトプットディレクトリ、公開ディレクトリ等をこのファイルで設定することができます。

まずはルートディレクトリにwebpack.config.jsを作成します。

touch webpack.config.js

続いて作成したファイルに以下のコードを記述します。
各設定の説明はソースコード内に記載しています。

// パス操作を行うためのpathモジュールをインポート
// Node.jsに標準搭載されている
const path = require('path');

// モジュールの作成
module.exports = {
  // モジュールバンドルを行うファイルの指定
  // entry内のプロパティ名がアウトプットファイル名になる（今回の場合main.jsとなる）
  entry: {
    main: './src/ts/index.ts',
  },
  // ちなみにwebpackは標準でmain.jsというファイル名でアウトプットを行うため、以下のように書き換えることも可能
  // entry: './src/ts/index.ts',

  // アウトプットディレクトリの指定
  output: {
    path: path.join(__dirname, 'public/dist'),
  },

  // モジュール解決方法の設定
  resolve: {
    // モジュールとして扱いたいファイルの拡張子を省略する。
    // import { hoge } from 'Hoge'; とあった場合、Hoge.tsを読み込む。なければHoge.jsを読み込む。
    extensions: ['.ts', '.js'],
  },

  // モジュールに適用するルールの設定
  module: {
    // 拡張子が.tsで終わるファイルに対して、ts-loaderを適用している
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
      },
    ],
  },

  // webpack-dev-serverの設定
  devServer: {
    static: {
      // 公開ディレクトリの指定
      directory: path.join(__dirname, 'public/dist'),
    },
    // ポート番号の指定
    port: 9000,
  },

  // 監視除外ファイルの指定
  watchOptions: {
    ignored: /node_modules/,
  },
};

package.jsonにscriptsを追記する

先程作成したpackage.jsonにwebサーバーの立ち上げやTypeScriptのコンパイル監視等を行うためのscriptsを追記します。

{
  "name": "ts-dev",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",

  // 追記
  "scripts": {
    "start": "npx webpack serve --mode=development",
    "build": "npx webpack --mode=production"
  },
  "devDependencies": {
    "ts-loader": "^9.3.0",
    "typescript": "^4.7.2",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  }
}

今回2種類のscriptsコマンドを用意しました。

yarn run start
開発用webサーバーの立ち上げ、ホットリロード、TypeScriptのコンパイル監視の実行

yarn run build本番用ビルドファイルの作成

ちなみにnpxコマンドはローカルインストールしたコマンドを実行するためのものです。

tsconfig.jsonの作成

ルートディレクトリにtsconfig.jsonを作成します。

touch tsconfig.json

tsconfig.jsonはTypeScriptコンパイラーの設定ファイルであり、
コンパイル対象のディレクトリやコンパイラーのオプションを設定することができます。

tsconfig.jsonに以下のコードを記述します。

各オプションの説明はソースコード内に記載しています。

{
  "compilerOptions": {
      "target": "es5", // コンパイル後のJavaScriptのバージョンの指定
      "rootDir": "./src", // TypeScriptのソースコードがあるディレクトリの指定
      "module": "commonjs", // コンパイル後のモジュールパターンの指定
      "strict": true, // any型を禁止にする等、コンパイル時に厳格なチェックを行う
      "esModuleInterop": true, // CommonJS形式のモジュールを扱えるようにする
  }
}

表示確認用のHTMLファイルの作成

ルートディレクトリでディレクトリの作成とHTMLファイルの作成を行います。

mkdir -p public/dist
touch public/dist/index.html

作成したindex.htmlに以下のコードを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpackでTypeScript開発環境を構築しよう</title>
</head>
<body>
  <h1>webpackでTypeScript開発環境を構築しよう</h1>
  <script src="./main.js"></script>
</body>
</html>

TypeScriptを実行してみよう！

TypeScriptファイルの作成

ルートディレクトリで以下のコマンドを実行します。

mkdir -p src/ts
touch src/ts/addNum.ts src/ts/index.ts

作成した2ファイルに以下のコードを記述します。

// 2つの引数で足し算を行って合計を返すaddNum関数のエクスポート
export const addNum = (a: number, b: number): number => a + b;

// addNum関数の読み込みと実行結果のConsole出力
import { addNum } from './addNum';

console.log(addNum(1, 5));

開発環境の立ち上げ

ルートディレクトリで以下のコマンドを実行し、開発環境を立ち上げます。

yarn run start

開発環境URL
http://localhost:9000/

開発者ツールを開きConsoleタブをアクティブにします。

1 + 5の和である6が出力されているかと思います。

関数の引数を書き換え、きちんとホットリロードとコンパイルの監視が実行されているのかを確認してみます。

src/ts/index.tsを以下のように書き換えます。

// addNum関数の読み込みと実行結果のConsole出力
import { addNum } from './addNum';

console.log(addNum(5, 5)); // ここを変更

ホットリロードとコンパイルの監視が実行され、
5 + 5の和である10が出力されているかと思います。

本番用ビルドファイルの作成

以下のコマンドで本番用ビルドファイルを作成します。

yarn run build

public/dist/配下に、以下のソースコードが記述されているmain.jsというアウトプットファイルが出力されます。

(()=>{"use strict";var e,r={473:(e,r)=>{Object.defineProperty(r,"__esModule",{value:!0}),r.addNum=void 0,r.addNum=function(e,r){return e+r}}},o={};e=function e(t){var u=o[t];if(void 0!==u)return u.exports;var d=o[t]={exports:{}};return r[t](d,d.exports,e),d.exports}(473),console.log((0,e.addNum)(1,5))})();