この記事の概要

Webpackを使って、TypeScriptの自動コンパイル、自動リロードを設定する方法を記載する

開発環境構築

プロジェクトディレクトリの作成

// プロジェクトディレクトリ作成
$ mkdir typescript
$ cd typescript
// npm initする
$ npm init

ツールのインストール

// ツールのインストール
npm install typescript ts-loader webpack webpack-cli webpack-dev-server --save-dev

※以下のツールをインストールした
typescript→typescriptのコンパイラ
ts-loader→typescriptのローダー
webpack→モジュールバンドラ（JSビルドツール）
webpack-cli→コマンドプロンプトからWebpackを動作させる
webpack-dev-server→Webpackに関する開発サーバー

package.jsonにてscriptsの追加

package.json

{
  "name": "typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=development", # 追加
    "start": "webpack serve --mode=development" # 追加
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

※npm start→webpack-dev-serverの起動
※npm run build→webpackビルド処理起動

webpackの設定ファイルの作成

webpack.config.js

const path = require('path');
module.exports = {
    // モジュールバンドルを行う起点となるファイルの指定
    // 指定できる値としては、ファイル名の文字列や、それを並べた配列やオブジェクト
    // 下記はオブジェクトとして指定した例 
    entry: {
        bundle: './src/app.ts'
    },  
    output: {
        // モジュールバンドルを行った結果を出力する場所やファイル名の指定
        // "__dirname"はこのファイルが存在するディレクトリを表すnode.jsで定義済みの定数
        path: path.join(__dirname,'dist'),
        filename: '[name].js'  // [name]はentryで記述した名前(この例ではbundle）が入る
    },
    // モジュールとして扱いたいファイルの拡張子を指定する
    // 例えば「import Foo from './foo'」という記述に対して"foo.ts"という名前のファイルをモジュールとして探す
    // デフォルトは['.js', '.json']
    resolve: {
        extensions:['.ts','.js']
    },
    devServer: {
        // webpack-dev-serverの公開フォルダ
        static: {
            directory: path.join(__dirname, "dist"),
        },
    },
    // モジュールに適用するルールの設定（ここではローダーの設定を行う事が多い）
    module: {
        rules: [
            {
                // 拡張子が.tsで終わるファイルに対して、TypeScriptコンパイラを適用する
                test:/\.ts$/,loader:'ts-loader'
            }
        ]
    }
}

TypeScriptのコンパイル設定ファイルの作成

// TypeScriptのコンパイル設定ファイル作成
$ tsc --init

TypeScriptのプログラム作成

ディレクトリ作成

// ディレクトリ作成
$ mkdir dist
$ mkdir src

プログラム作成

src/app.ts

import {Item} from './item';
var elem = document.getElementById('output');
var aBook = new Item('はじめてのTypeScript',1980);
aBook.say(elem);

src/item.ts

export class Item {
    constructor(private name:string, private price:number){}
  
    public say(elem : HTMLElement | null) : void {
        if(elem){ // 引数がnullでない場合
          elem.innerHTML = '書名：' + this.name + '  価格: ' + this.price + '円';
        }
    }
}

dist/index.html

<!DOCTYPE html>
<html lang='ja'>
  <head>
    <meta charset="utf-8">
    <title>Hello typescript</title>
  </head>
  <body>
    <div id="output"></div>
    <script src="bundle.js"></script>
  </body>
</html>

TypeScriptのプログラム実行

webpack-dev-serverの起動

// webpack-dev-serverの起動
$ npm start

localhostをブラウザで開く

app.tsの内容を変更すると自動リロードされる