Zenn
🙌

Express + TypeScript + webpack + VScode でデバッグ環境を構築

2022/10/27に公開
Node.js
VS Code
JavaScript
Express
TypeScript
tech

はじめに

ExpressはNode.jsのWebアプリケーションフレームワークです。
TypeScriptを使って作成したExpressアプリをwebpackでバンドルし、VScodeでデバッグする環境を構築する方法を紹介します。
今回使用するnodeとnpmのバージョンは以下の通りです。

- node v16.18.0
- npm v8.19.2

必要なライブラリをインストールする

Expressをインストール

npm i express

webpackやTypeScript関係をインストール

npm i -D ts-loader ts-node webpack webpack-cli webpack-node-externals

nodemonをインストール

npm i -D nodemon

nodemonはnode.jsプログラムを実行し、変更があれば自動リロードしてくれるライブラリです。
自動リフレッシュするために必要です。(多分ts-node-devでも代用可能です。)

型定義ファイル関係をインストール

npm i -D @types/express @types/node @types/webpack @types/webpack-node-externals @typescript-eslint/eslint-plugin

必要なファイルを作成

Expressのコードを作成

srcディレクトリ内に任意のExpressのコードを作成します。
今回は単に"Hello World!!"と表示するアプリにします。

index.ts
import express from 'express';
​
const app = express();
​
app.get('/', (req, res) => {
    res.send('Hello World!!');
});
​
app.listen(3000);

webpack.config.tsを作成

作成したExpressコードをバンドルする為にwebpack.config.tsを作成します。

webpack.config.ts
import * as path from 'path';
import * as webpack from 'webpack';
import nodeExternals from 'webpack-node-externals';
​
const config: () => webpack.Configuration = () => {
  return {
    mode: 'development',
    target: ['node', 'es2020'],
    externals: [nodeExternals()],
    entry: {
      app: path.resolve(__dirname, 'src/index'),
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist'),
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: [/node_modules/],
          options: {
            configFile: 'tsconfig.json',
          },
        },
      ],
    },
    resolve: {
      extensions: ['.ts'],
    },
    devtool: 'cheap-module-source-map',
  };
};
​
export default config;

ポイントは

devtool: 'cheap-module-source-map'

とすることです。
これがないとソースマップが作られないのでデバックできません。

ts.config.jsonとts.node.jsを作成

ts.config.jsonとts.node.jsを作成します。(詳しくは省略)

VScodeの実行の構成でlaunch.jsonを作成

launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Program",
            "type": "node",
            "request": "launch",
            "cwd": "${workspaceFolder}",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/nodemon",
            "program": "${workspaceFolder}/dist/app.js",
            "restart": true,
            "sourceMaps": true
        }
    ]
}

デバッグしてみる

VScode上で先ほど作成したlaunch.jsonの構成でデバッグを開始します。

http://localhost:3000/

にアクセスして"Hello World!!"と表示されればExpressアプリが正常に動作しています。

ブレークポイントで停止

作成したExpressアプリのtsファイル上の任意の場所にブレークポイントを設置して、
デバッグできるか試します。
今回は6行目の

res.send('Hello World!!');

にブレークポイントを設置してみます。

再度

http://localhost:3000/

にアクセスすると、先ほど設置したブレークポイントで停止しているはずです。

自動リフレッシュ

作成したExpressアプリのコードを変更してリフレッシュが行われるか試します。
任意の場所に変更を加えてVScodeのデバックコンソールに

[nodemon] restarting due to changes...

と表示されればリフレッシュされています。

最後に

これで、TypeScriptで記述したExpressアプリをwebpackでバンドルしたソースを
VScodeでデバッグすることができました。
VScodeでExpressアプリを作成するとき(もちろんNode.js全般で使えますが)
には重宝すると思うので、知らなかった人は試してみてください。
今回作成したサンプルはgithubでも公開しています。
https://github.com/lsptt5271/express-ts-webpack-vscode-demo
では、よいExpressライフを！

Discussion