TypeScript

TypeScript は、プレーンな JavaScript にコンパイルされる JavaScript の型付きスーパーセットです。このガイドでは、TypeScript を webpack と統合する方法を学習します。

基本設定

最初に、TypeScript コンパイラとローダーをインストールします。

npm install --save-dev typescript ts-loader

次に、ディレクトリ構造と設定ファイルを変更します

プロジェクト

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- tsconfig.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- index.js
+   |- index.ts
  |- /node_modules

tsconfig.json

JSX をサポートし、TypeScript を ES5 にコンパイルするための設定を行いましょう...

{
  "compilerOptions": {
    "outDir": "./dist/",
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

tsconfig.json 設定オプションの詳細については、TypeScript のドキュメントを参照してください。

webpack 設定の詳細については、設定の概念を参照してください。

次に、TypeScript を処理するように webpack を設定します

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

これにより、webpack は ./index.ts をエントリポイントとして、すべての .ts および .tsx ファイルを ts-loader を介してロードし、現在のディレクトリに bundle.js ファイルを出力するように指示されます。

次に、lodash の定義にデフォルトエクスポートが存在しないため、./index.ts で lodash のインポートを変更します。

./index.ts

- import _ from 'lodash';
+ import * as _ from 'lodash';

  function component() {
    const element = document.createElement('div');

    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

ローダー

ts-loader

このガイドでは、ts-loader を使用しています。これは、他の Web アセットのインポートなどの追加の webpack 機能を有効にするのが少し簡単になるためです。

コードのトランスパイルに既に babel-loader を使用している場合は、@babel/preset-typescript を使用して、Babel に JavaScript と TypeScript の両方のファイルを処理させることができます。追加のローダーを使用する必要はありません。ただし、ts-loader とは異なり、基盤となる @babel/plugin-transform-typescript プラグインは型チェックを実行しないことに注意してください。

ソースマップ

ソースマップの詳細については、開発ガイド を参照してください。

ソースマップを有効にするには、TypeScript がコンパイルされた JavaScript ファイルにインラインソースマップを出力するように設定する必要があります。TypeScript 設定に次の行を追加する必要があります。

tsconfig.json

  {
    "compilerOptions": {
      "outDir": "./dist/",
+     "sourceMap": true,
      "noImplicitAny": true,
      "module": "commonjs",
      "target": "es5",
      "jsx": "react",
      "allowJs": true,
      "moduleResolution": "node",
    }
  }

次に、webpack にこれらのソースマップを抽出して最終的なバンドルに含めるように指示する必要があります。

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.ts',
+   devtool: 'inline-source-map',
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: [ '.tsx', '.ts', '.js' ],
    },
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

詳細については、devtool のドキュメント を参照してください。

クライアントタイプ

import.meta.webpack など、TypeScript コードで webpack 固有の機能を使用できます。 webpack はこれらの型も提供しています。TypeScript の reference ディレクティブを追加して宣言します。

/// <reference types="webpack/module" />
console.log(import.meta.webpack); // without reference declared above, TypeScript will throw an error

サードパーティライブラリの使用

npm からサードパーティライブラリをインストールする場合は、そのライブラリの型定義もインストールすることを忘れないでください。

たとえば、lodash をインストールする場合、次のコマンドを実行して型定義を取得できます。

npm install --save-dev @types/lodash

npm パッケージに既に宣言型定義がパッケージバンドルに含まれている場合、対応する @types パッケージをダウンロードする必要はありません。詳細については、TypeScript の変更ログブログ を参照してください。

他のアセットのインポート

TypeScript でコード以外のアセットを使用するには、これらのインポートの型を遅延する必要があります。これには、プロジェクトの TypeScript のカスタム定義を示す custom.d.ts ファイルが必要です。.svg ファイルの宣言を設定してみましょう。

custom.d.ts

declare module '*.svg' {
  const content: any;
  export default content;
}

ここでは、.svg で終わるすべてのインポートを指定し、モジュールの content を any として定義することにより、SVG の新しいモジュールを宣言しています。型を文字列として定義することで、それが URL であることをより明示的にすることができます。CSS、SCSS、JSON など、他のアセットにも同じ概念が適用されます。

ビルドパフォーマンス

ビルドツールについては、ビルドパフォーマンス ガイドを参照してください。