Twitter Facebook github

WebPackでnodeランタイム向けにビルドする

前回まででTypeScriptを使ってフロントエンドJavaScriptをビルドする話を書きましたが、TypeScrptに慣れてしまうとES2015で書く気にはなれません。

当然のようにサーバーサイドもTypeScriptでコードを書き始めたのですが、ビルドにフロントエンドでも使っていたWebPackを採用して少しハマったので共有します。

やりたかったこと

  • TypeScriptでsocket.ioを使ったソケットサーバーを書きたい
  • 変更検知でビルド自動化したい
  • glup/grunt抜きでWebPackでやりたい

環境

  • Mac OS X El Capitan
  • node.js v5.7.1 / npm v3.6.0
  • TypeScript v1.9.0-dev.20160312
  • typings v0.7.9
  • webpack v1.12.14

上3つのモジュールは npm でグローバルインストール済み。

  • ts-loader@0.8.1

WebPackでTypeScriptをビルドするためのローダーをローカルインストールしています。

忙しい人のために

先に結論を書くと、nodeランタイム用にWebPackを使ってビルドするとき、単に node_modules をexcludeするだけではダメで、代わりに webpack-node-externals を使いましょう、という話。

やったこと

ソースコードの修正

このシンプルな socket.io をつかったサーバー用コードをTypeScriptに移植していました。

もちろんそのままでは動かなくて、まずはTypeScriptで使う型定義ファイルを typings を使ってインストールします。

この node 定義ファイルは require するために必要です。

TypeScript用に上のJSを書き換えます。具体的には require 周りを import してから使うようにします。

設定ファイルの準備

TypeScriptコンパイル用の設定ファイルを作ります。

WebPack用設定ファイルを作ります。

ビルドします。

解決策

原因切り分けのために、 tsc コマンドでコンパイルすると成功したことから、WebPackに起因するものだと特定できました。

どうやらWebPackで node ランタイム用にビルドする時は、 webpack-node-externals が必要とのことで、これを使います。

WebPackの設定ファイルに、ドキュメントの通りに変更を加えます。

ビルドして、実行してみます。

うまく動いてくれました!

所感

ちゃんと exclude しているし、フロントエンドではエラーにならなかったので、除外設定には問題ないと思って数時間ハマりました。。
あまりサーバーサイド側のビルドにWebPackというのは聞かなくて、サーバー用にTypeScriptをビルドする際のベストプラクティス的なものを探しています。
軽く調べた感じだと gulp を使っているケースが多いようでした。

参考

コメントを残す

メールアドレスが公開されることはありません。