過去記事「TypeScriptの導入・コンパイルと設定ファイルtsconfig.jsonを触ってみる」では、TypeScriptの導入からJavaScriptへコンパイルまでの流れをまとめていましたが、コマンドラインでの操作であったため実際の開発においては現実的ではありませんでした。そこで今回は実際の開発時に使えるようにwebpackを使ったTypeScriptのコンパイル環境を構築してみたいと思います。  

webpackとTypeScriptのパッケージをインストール

まずはnpm経由で必要なパッケージをインストールしていきます。ここではwebpackに関するパッケージとTypeScriptに関するパッケージの合計5つをインストールする形になります。

$ npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader

  パッケージのインストールが完了すると、package.jsonのdevDependenciesに追加されているのが確認できます。また、この時に合わせてwebpackのビルドコマンドなども、scriptsに指定しておくと便利ですね。 【package.json】

{
 ....... 
 "scripts": { 
  "dev": "npx webpack-dev-server",
  "build": "npx webpack",
  "watch": "npx webpack --watch"
 },
 "devDependencies": {
  "ts-loader": "^7.0.0",
  "typescript": "^3.8.3",
  "webpack": "^4.42.1",
  "webpack-cli": "^3.3.11",
  "webpack-dev-server": "^3.10.3"
  .......
 }
}

  今回はサンプルとして下記のようなファイル・ディレクトリの構成を用意しています。ソースファイルと出力用ファイルのディレクトリをそれぞれ分けておきます。そしてwebpackの設定ファイルである「webpack.config.js」とTypeScriptの設定ファイルである「tsconfig.json」も作成しておきます。

node_modules
dist
  ┗（main.js）
src
  ┣ index.ts
  ┗ modules
    ┗ module.ts
webpack.config.js
tsconfig.json

   

webpackとTypeScriptの設定ファイルを作成

まずは、webpackの設定ファイルである「webpack.config.js」を下記のように作成します。過去記事「webpack-dev-serverでローカルサーバーと自動更新させてwebpackのファイル変更を検知する」でまとめているものとおおよそ同じですが、今回はTypeScriptのコンパイルになりますので、エントリーポイントを該当するTypeScriptファイルに指定します。また、TypeScriptのコンパイルに「ts-loader」を使うことになるので、その設定も合わせて行います。また、コンパイル時のエラーを避けるためには、resolveの値にはjsとtsの拡張子を指定しておくことも重要になります。 【webpack.config.js】

module.exports = {
 mode: 'development',
 entry: './src/index.ts',
 output: {
  path: `${__dirname}/dist`,
  filename: 'main.js'
 },
 module: {
  rules: [
   {
    test: /\.ts$/,
    use: 'ts-loader'
   }
  ]
 },
 resolve: {
  extensions: [
   '.ts', '.js'
  ]
 },
 devServer: {
  contentBase: `${__dirname}/dist`,
  port: 8080,
  open: true
 }
}

  続けて、TypeScriptの設定ファイルである「tsconfig.json」も下記の通り設定していきます。この内容について詳しくは過去記事「TypeScriptの導入・コンパイルと設定ファイルtsconfig.jsonを触ってみる」でも紹介していますので、詳しくはこちらを参考にどうぞ。 【tsconfig.json】

{
 "include": [
  "src/**/*"
 ],
 "exclude": [
  "node_modules"
 ],
 "compilerOptions": {
  "incremental": true, 
  "target": "ES5",
  "module": "commonjs", 
  "sourceMap": true, 
  "removeComments": true,
  "strict": true,
  ..........
 }
}

  これで、webpackを使ったTypeScriptのコンパイル環境が整いました。今回はサンプルとして下記のTypeScriptファイルを用意してコンパイルしてみようと思います。 【src/index.ts】

import moduleFunction from './modules/module';

console.log(moduleFunction('Hello World!'));

  webpackでは複数のスクリプトファイルをバンドルできますので、モジュールとして読み込むTypeScriptファイルも用意しました。 【src/modules/module.ts】

export default function moduleFunction(message: string): string {
 return message;
}

  これで実際にwebpackのビルドコマンドを実行してみます。問題なくビルドが実行されると出力先のディレクトリにJavaScriptファイルが生成されます。

$ npm run build

もしくは

$ npx webpack

  コンパイルされたJavaScriptファイルを確認してみます。該当するTypeScriptファイルがコンパイルされているのが確認できますね。 【dist/main.js】

/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};

..................

/***/ "./src/index.ts":
/*!**********************!*
!*** ./src/index.ts ***!
**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

..................

/***/ "./src/modules/module.ts":
/*!*******************************!*
!*** ./src/modules/module.ts ***!
*******************************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

  実際の処理が問題なく行われるかも確認してみます。nodeコマンドでコンパイルされたファイルを実行してみますと、動作しているのがわかりますね。

$ node dist/main.js

Hello World!

   

監視モードとローカルサーバーで自動でコンパイルできるように

webpackのローカルサーバーと監視コマンドを使うことで、TypeScriptファイルの編集があった場合に、自動でコンパイルされローカルサーバーが立ち上がり、ブラウザ上でも更新が確認できるようになります。package.jsonにコマンドをスクリプトとして記載していますので、下記のコマンドを実行するだけでOKです。

$ npm run dev

もしくは

$ npx webpack-dev-server

  webpackには監視コマンドも揃っており、TypeScriptのコンパイル環境において、webpackを使うことでコンパイルの自動化などができるようになります。こうすることで、実際の開発においてもかなり使いやすくなるのではないでしょうか。