WebpackとTypeScriptの併用

これまでTypeScriptを敬遠してきたが、いよいよ避けられなくなったため、少しずつ始めることにした。Node.jsを始めたときもそうだった。誰しも環境を大きく変えるのはつらいものがある。ましてや年齢も年齢、ということもある。それでもやはり公開されているモジュールはTypeScriptで記述されていることが一般的だし、それに習って記述することが多くの人に使ってもらえることに繋がる。

TypeScriptを始めるにあたり最初に直面した問題、modules/内に作成したtsファイルをエントリーポイントのtsファイルがimportしてくれなかった。単純なことなのに意外と情報少なくて解決するまで時間がかかってしまった。失念して再度悩むことを避けるためTypeScriptに関して作業したことをメモしておく。作業メモはWebpackの環境を作っていることを前提とする。

# npm i -D typescript ts-loader

言語としてのTypeScript「typescript」とWebpackのTypeScriptローダーである「ts-loader」をインストールする。

# npx tsc --init

TypeScriptを初期化する。このコマンドを実行すると「tsconfig.json」というファイルが作成される。このファイルに関する設定方法はたくさん記事があるのでそれらを参照すれば良い。

module.exports = {
  entry: {
    index : path.join( __dirname, 'src', 'index.ts' )
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader"
      }
    ]
  },
  resolve: {
    extensions: [".ts", ".js"]
  }
};

webpack.config.jsの記述。エントリーポイントの参照先をtsファイルに変更するのは当然。tsファイルの解釈をts-loaderに任せるのも当然。ここまではすぐ理解できた。

更に解決先の拡張子の指定が必要で、これを見つけるのに数日かかってしまった。多分デフォルトでは「js」一択なのだろう。エントリーポイントでtsファイルを指定しているので、これを指定しなくてもエントリーポイントのtsファイルは処理してくれていたようだ。しかしエントリーポイントでimportするファイルがtsファイルであった場合にエラーになっていた。このresolve.extensionsで「[“.ts”, “.js”]」を指定することで無事バンドルすることができるようになった。

助かった。