サーバ側のTypescript化

サーバ側はexpress-generatorで生成したJavascriptのコードなので、クライアント(Typescript)と別の言語・型情報がないので間違いに気づきにくい・クラスを自然に書けないなど、人によっては不便と感じると思う。

そこで、サーバのコードをTypescriptで書けるようにする。そのためには

1. 必要なモジュールの追加
2. Webpackの設定: 設定ファイル webpack.config.js を作る
3. ビルドと実行: Webpackを実行し、生成されたファイル(main.js)をnodeで実行する

必要なモジュールの追加

typescriptとwebpackは、インストール時[-g]を指定してグローバルインストールしても良い。

• typescript: トランスパイラ
• 型情報: Javascriptで書かれたライブラリをTypescriptで使用するための情報
  • @types/express
  • @types/node
• Webpack (グローバルにあればよい)
  • webpack
  • webpack-cli
  • ts-loader: .tsファイルをTypescriptのトランスパイルしてからバンドルするのに使用

Webpackの設定

今のところ必要なモジュールだけ考えると以下のようになる。今後Sqliteのようなバイナリを追加すると、もう少し複雑になってくる。

なお、ここではディレクトリの構造を以下のように想定した設定ファイルにしている。

• <プロジェクトルート>
  • dist
    • client: クライアント側のビルド結果
    • server: サーバ側のビルド結果

// Webpack4, server用
module.exports = {
    mode: 'development',
    entry: './bin/www.ts',          // 依存関係の起点
    target: 'node',                 // node.js用
    node: {
          __dirname: false,         // __dirname, __filename は置き換えない
          __filename: false,
    },
    output : {
      // dist/server フォルダに格納する(この場で __dirname を解決するため、``で囲んでいる
        path: `${__dirname}/../dist/server`,
        filename: '[name].js'       // main.js になる
    },
    devtool: 'source-map',          // mapファイル(実行には関係ない)
    resolve: {
        // import, require で指定したモジュールを探すときの拡張子
      // .node など拡張子が増えたら反映する
        extensions:['.ts', '.webpack.js', '.web.js', '.js', '.json']
    },
    module : {
        rules: [
            {
              // .ts ファイル はts-loaderが処理する。
              // 指定が無ければ、同階層の tsconfig.json を使用してトランスパイルする
                test: /\.ts$/,
                use: [
                    {
                        loader: 'ts-loader',
                    }
                ]
            },
        ],
    },
    plugins:[]
};

ビルドと実行

ビルドと実行でコマンドを毎回打つのは面倒なので package.json にコマンドを書いておく。必要なところだけ抜粋すると以下のようになる。ここでは、グローバルにインストールした Webpack を使用している。

{
  "scripts": {
    "start": "node ../dist/server/main",
    "build": "webpack --config webpack.config.js"
  }
}

ビルド時間を短くする

クライアント側と同様、サーバ側もソースの変更を検出してビルドし、サーバ再起動をする方法がある。HMRという高度な技もあるそうだが、色々とプログラム自体を触らないといけないので微妙なので、それが無くても簡単にできる方法を採用する。

必要なのは node-dev というモジュールで、グローバルにインストールして node の代わりに使用すると、モジュールが変更されたら再起動してくれるようになる。

npm install -g node-dev

ソースを変更したら自動でビルドした方が楽なので、webpack を --watch オプションを付けて実行するとよい。そのためのコマンドを package.json に追加すると以下のようになる。

{
  "scripts": {
    "build": "node_modules/.bin/webpack --config webpack.config.js",
    "build-watch": "node_modules/.bin/webpack --watch --config webpack.config.js",
    "start": "node-dev ../dist/server/main"
  }
}

あとは、2つのコマンドプロンプトを開き、一方でnpm run build-watch 、他方で npm start を実行すれば、サーバ側のコードを変更したら自動でサーバが再起動するようになる。ビルド時間が短くなるし、コマンドを打つ手間もかからないのでとても快適になる。

参考

1. https://ics.media/entry/16329#webpack-ts
2. https://github.com/fgnass/node-dev 実行中のファイルが変更されたら再起動する node