この記事の概要
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をブラウザで開く