JavascriptからTypesctiptへの移行～ts-migrateを活用

経緯

個人で開発してるプロジェクトで、どうしても型を使えたほうが開発効率が上がりそうというのが見えてきたので、一旦挫折したTypescriptへの移行を四苦八苦しながら調査した

対応方法

いろいろ調べた結果、どうやらts-migrateを使えば、比較的、低労力で移行できそうなところまでは見えたので、ts-migrateを利用した。
ただ、調べた感じ、webpackが鬼門になりそうな感じがした。
前回は、typescriptへの置換で苦労して挫折したが、今度は、その先のビルド周りで苦労しそう。。。

手順

1. ts-migrateのインストール
2. ts-migrateの実行
3. webpackのインストール
4. webpackにてビルド

ts-migrateのインストール

npm i ts-migrate

ts-migrateの実行

npx ts-migrate-full src

webpackのインストール

npm i webpack webpack-cli ts-loader

インストールが終わったら、webpack.config.jsを作る。

プロジェクトによるので、一概にこうしろとは言えないので、自分のところのサンプルを晒す

module.exports = {
  entry: {
    'main': './src/main.ts',
    'renderer': './src/renderer.ts'
  },
  module: {
    rules: [
      {
        // ts-loaderでトランスパイルする
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "ts-loader",
            options: {
              transpileOnly: true,
            },
          },
        ]
      },
    ],
  },
  resolve: {
    modules: [`${__dirname}/src`, 'node_modules'],
    extensions: [".ts", ".js"],
    fallback: {
      "path": require.resolve("path-browserify"),
      "util": require.resolve("util/"),
      "crypto": require.resolve("crypto-browserify"),
      "buffer": require.resolve("buffer/"),
      "stream": require.resolve("stream-browserify"),
      "assert": require.resolve("assert/"),
      "os": require.resolve("os-browserify/browser")
    }
  },
  output: {
    libraryTarget: "umd",
    filename: "[name].js",
    path: `${__dirname}/dist`,
  },
  target: 'electron-renderer',
};

最低でも、entryとmodule.rules.useにts-loader、targetの指定が必要なはず。

webpackにてビルド

webpackを実行する。
自分は、npm scriptに "build-dev": "webpack --mode=development"を指定して実行している。

自分の環境では、以下のエラーメッセージがよくでてきてた。

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

自分の場合は、一個一個fallbackに指定して、インストールして潰していった。
エラーメッセージの対処法に従っただけなので、内容はよく分かってない。。。

感想

とりあえず、ビルドするところまではできた。
実行でまだ問題が出てきそうな気がする。。。

参考サイト

ts-migrate：大規模にTypeScriptに移行するためのツール

JSからTSへの移行ツール、ts-migrateを試してみた - Qiita