Typescript 3.x と Webpack 4.x を合わせて使う
Typescript はコンパイルすることで Javascript のコードに変換できますが、複数ファイルをバンドルする機能はありません。したがって何らかの方法で複数ファイルのモジュールを1ソースにバンドルしなければなりません。
今回は Webpack を使って、Typescript をビルドして得られた Javascript のファイルを1ファイルにバンドルする方法をまとめます。
Node.jsがインストールされており、npm コマンドが使用できる前提で、以下に手順を記します。
サンプルプロジェクトを作成する
適当な作業用のディレクトリにを用意し、以下のコマンドで初期化して package.json を作成します。
$ npm init
ディレクトリ構成
Typescript のソースと、ビルドして得られる Javascript のソースコードを出力するために、src ディレクトリと dist ディレクトリを用意します。
以下のようなディレクトリ構成で考えます。
app
├── dist
│ └── main.js
├── src
│ └── main.ts
├── node_modules
│ └── 色々 ...
├── index.html
├── package.json
├── webpack.config.json
└── tsconfig.json
Webpack, Typescript インストール
まずは必要なモジュールをインストールします。
インストールするのは以下の4つです。
- Typescript
- Webpack
- Webpack-cli
- ts-loader
$ npm install --save-dev typescript webpack webpack-cli ts-loader
Webpack のバンドル処理の中で、Typescript のコンパイルを行うので ts-loader をインストールしています。
tsconfig.json を作成する
tsconfig.json ファイルは Typescript のコンパイラに対する設定を記述するファイルです。
{
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "es2015"
}
}
webpack.config.js
webpack.config.js ファイルは Webpack 使用時の設定を記述するファイルです。
今回は Webpack のバンドル処理と同時に コンパイルも行うので、以下のように設定します。
module.exports = {
mode: 'development',
entry: './src/main.ts',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader'
}
]
},
resolve: {
extensions: [
'.ts'
]
}
};
内容は単純で、エントリポイントを /src/main.ts ファイルとし、拡張子 ".ts" のファイルに対しては、ts-loader を使ってコンパイルを行うようにしています。
resolve の記述は、各ファイルでの import 時に Typescript として拡張子を補完する設定です。
コンパイル用のScript
最後に Webpack の処理を呼び出すスクリプトを package.json に記述します。
(略)..
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack -w"
},
(略)..
npm run build で Typescript をコンパイルした結果を dist ディレクトリ以下に生成します。
npm run watch はファイルの変更を監視して差分をコンパイルする処理を起動します。開発時はこれを起動しておくことで、いちいちスクリプトをたたかなくても最新のビルド結果が即座に得られます。
サンプルコード
最後に実際に動くかどうか確認してみます。例えば計算機クラスを作成します。
src/calculator.ts
export default class Calculator {
add(x: number, y: number): number {
return x + y;
}
}
このクラスを使って計算する処理を記述します。
src/main.ts
import Calculator from "./calculator";
const x = 100;
const y = 200;
const calc = new Calculator();
const result = calc.add(x, y);
console.log(`${x} + ${y} = ${result}`);
動作確認
$ npm run build
上記コマンドを実行すると dist/main.js ファイルが生成されます。
このファイルを index.html で読み込みブラウザで確認すると、コンソール上に正しい計算結果が表示されるはずです。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="dist/main.js"></script>
<title>コンソールを見てね。</title>
</head>
<body>
</body>
</html>
以上、Webpack + Typescript の合わせ技でした。
以上。
