[TS/Gulp] Cannot find moduleで時間を浪費した話

概要

タイトルの通り、Cannot find moduleで時間を浪費したので、その覚書です。

まず要点から書くと、Typescript単体ではpathsを解決してくれないので、通常はビルド時にwebpack等で解決します。

今回はTypeScriptで書かれたgulpを実行したかったので、話が若干複雑になりました。

方法1. gulpとbabelを使う

npx gulpで実行する場合、babelで変換されるようです。
なので、module-resolverを使ってbabel.config.js内で解決します。

{
  "plugins": [
    ["module-resolver", {
      "alias": {
        "@config": "./config/",
        "*": "./src/",
      }
    }],
    ...

方法2. gulpとts-nodeを使う

ts-nodeを使ってgulpを実行する場合、npx gulpは使わず、ts-nodeで直接gulpのタスクファイルを実行します。
その場合、tsconfig-pathsとtsconfig.jsonを使って解決します。

 $ npx ts-node -r tsconfig-paths/register gulp_task.ts

{
  "compilerOptions": {
    "paths": {
      "@config/*": [ "./config/*" ],
      "*": [ "./src/*" ]
    },
    ...

まとめ

とにかく重要な点は、tsconfigのpathsはts -> jsの変換時に不整合がないか参照される程度で、置き換えはしてくれないので、別途パスの置き換えが要るという点です。

置き換える方法も幾つもあって、ts-node内で置き換える方法、babel内で置き換える方法、webpack内で置き換える方法等々…。

いずれにせよ、TS自体はパスを解決してくれないので、実行する前のどこかの段階でパスを置き換えないと、aliasは機能しないということです。