TypeScriptの開発環境構築（2）

TypeScriptの開発環境

前記事を実施した前提での記事となります。

環境準備（２）

モジュールバンドラー（webpack）等、各ツールのインストールを行います。
webpack、webpackコマンド、devサーバー、ts-loader

$npx i -D webpack webpack-cli webpack-dev-server ts-loader

package.json

webpack設定ファイルの準備

「webpack.config.js」という名称でファイルを作成し、コンフィグ（webpackの各種設定）を指定していきます。
内容は下記で保存。

※書き換えの細かい設定としてよく触る項目
entry・・・作業するファイル指定
output・・・出力先指定、出力ファイル名指定
mode・・・JSの出力形式

modeについて
「development」はまだ可読しやすい様なJSの出力だが、軽量化されていない。
mode: “production”,とすれば、圧縮、軽量化されたJSで書き出せる。

module.exports = {
  entry: {
    bundle: "./src/index.ts",
  },
  output: {
    path: `${__dirname}/dist`,
    filename: "[name].js", // [name]はentryで記述した名前（この設定ならbundle）
  },
  // import文でファイル拡張子を書かずに名前解決するための設定
  // 例...「import World from './world'」と記述すると"world.ts"という名前のファイルをモジュールとして探す
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "production",
  resolve: {
    extensions: [".ts", ".js"],
  },
  devServer: {
    static: {
      directory: `${__dirname}/dist`,
    },
    open: true,
  },
  // モジュールに適用するルールの設定（ローダーの設定を行う事が多い）
  module: {
    rules: [
      {
        // 拡張子が.tsのファイルに対してTypeScriptコンパイラを適用する
        test: /\.ts$/,
        loader: "ts-loader",
      },
    ],
  },
  performance: { hints: false },
};

開発用、公開用の各ディレクトリの準備

作業フォルダ配下に下記フォルダを作成する。

・src　・・・　ソース（作業場所）
・dist　・・・　公開（本番用として出力する場所）

distフォルダ配下に、表示用に「index.html」を作成。
※後に書き出されたJSをブラウザにて動作するか確認する用のファイルです。

後に利用しやすい様に、下記記述で作成しておく。
body内に下記を入れておく。

<div id="root"></div>
<script src="bundle.js"></script>

srcフォルダ配下に、「index.ts」を作成し、編集する。

TSコンパイルの設定ファイルの準備

下記コマンドを実行する。

$npx tsc --init

tsconfig.jsonという設定ファイルが生成されます。用途によって設定を行う。

クラスを管理するファイルの作成

srcフォルダ配下に、「js-class.ts」を作成します。
「js-class.ts」に動作確認用のソースコード、下記を記述する。（なんでも良い）

export default class js-class1{
  message: string;
  construgtor{
  	this.message = message
  }
  public js-class1(elem: HTMLElement | null){
  	if(elem){
  		elem.innerText = this.message
  	}
  }
}

次に、「index.ts」(名前はcommon.tsでもなんでもOK)を作成します。
js-class.tsをインスタンス化して利用する記述。

import js-class from "./js-class";
const root: HTMLElement | null = document.getElementById("root");

//インスタンス化
const js-class = new js-class1("表示させたい文字を引数に入れるよ")
js-class.js-class1(root)

バンドル（一つにまとめる）について

「package.json」を開きます。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

の部分を下記に調整する。(ついでにローカルサーバー立ち上げ設定も記述)

"scripts": {
  "build": "webpack",
  "start": "webpack serve"
},

ビルドコマンドを実行する。

$npm run build

distフォルダ内にバンドルされたJSが生成されます。
これは、srcフォルダに先程作成した2つのTSファイルを読み込みコンパイルしたものを、distフォルダに「build.js」として書き出す、という操作になります。

ローカルサーバーの立ち上げについて

個人的には、VSCodeの拡張機能「Live Server」のご利用をお勧めします。
「Go Live」ボタンで起動。

以下でご紹介する「ts-loaderを利用した立ち上げ」ですが、ローカルサーバーの立ち上げの一例であります。
他にもやり方はあると思いますので、個人の使い慣れた制作に合わせるなどご判断下さい。

（バンドルの設定手順で記述したstartの一文があれば良し）
「package.json」を開きます。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
},

の部分が下記の様に「start」があるか確認してください。

"scripts": {
  "start": "webpack serve"
},

調整したら、ローカルサーバーを立ち上げるコマンドを実行します。

$ npm start

正常に動けば自動的にブラウザが開き、「localhost:8080」のページが開かれます。
ブラウザの表示で、「index.ts」の js-class(引数)に入れた文字が表示されていれば成功です。

お疲れ様でした、
以上でTypeScriptの環境構築は以上となります。

関連記事