TypeScript+webpack4の環境設定

reactでTypeScriptが利用したかったので、buildできるようにwebpackにTypeScriptを追加。

対象バージョン

• webpack4
• typescript3.6
• ts-loader6.2

npmモジュールのインストール

webpackは既にインストールされていることが前提です。TypeScript用のnpmモジュール「typescript」と「ts-loader」をインストールします。

>npm i -D typescript ts-loader

インストールが完了するとpackage.jsonに追加されます。

"devDependencies": {
    "ts-loader": "^6.2.0",
    "typescript": "^3.6.4"
},

TypeScript設定ファイル

TypeScriptの設定ファイルを作成します。プロジェクトのルートディレクトリにtsconfig.jsonを作成します。

{
  "compilerOptions": {
    "sourceMap": false,
    "target": "es5", //TSをECMAScript5に変換
    "module": "es2015"
  }
}

webpackの設定

webpackの設定ファイル(webpack.config.js)にTypeScriptを追加します。.ts拡張子のファイルは「ts-loader」を利用することや、resolveに「.ts」を追加することで、import時に拡張子を省略することができます。

module: {
  rules: [
    {
      test: /\.ts$/, // 拡張子は.ts
      exclude: /node_modules/, // node_modulesディレクトリは除外
      use: [
        { loader: 'ts-loader' }, // .tsのファイルはts-loaderを使用
      ]
    }
  ]
}
resolve: {
  extensions: ['.js','.jsx','.ts']
}

bableを利用している場合

babelでとランスパイルをしている場合は.tsのrulesにbabel-loaderを追加するか、babelのrulesに.tsを追加しましょう。

ts-loaderを通した後にbabel-loaderを通すことが重要です。

module: {
  rules: [
    {
      test: /\.ts$/, // 拡張子は.ts
      exclude: /node_modules/, // node_modulesディレクトリは除外
      use: [
        { loader: 'babel-loader' }, // loaderは下から評価される
        { loader: 'ts-loader' }, // .tsのファイルはts-loaderを使用
      ]
    }
  ]
}

まとめ

基本的にはreactはjsxで記述するのでTypeScriptは必要ないかもしれません。TypeScriptのnamespaceとかを利用したくて今回はTypeScriptを追加しました。

.jsxや.tsがプロジェクトに混同するのは美しくないかもしれません。ts-loaderにjsxをコンパイルできるような設定をして「”jsx”:”react”」全て.tsや.tsxでコードを記述するのが一般的なのだろうか。