Webpack と Babel で TypeScript を使用する方法

TypeScript を Webpack および Babel と組み合わせると、堅牢な型チェック、効率的なモジュール バンドル、最新の JavaScript 機能の使用が可能になり、開発プロセスが強化されます。このガイドでは、Webpack および Babel を使用して TypeScript を設定する手順について説明します。

ステップ1: プロジェクトの設定

まず、新しい Node.js プロジェクトを初期化し、必要な依存関係をインストールします。

npm init -y
npm install typescript webpack webpack-cli babel-loader @babel/core @babel/preset-env @babel/preset-typescript --save-dev

ステップ2: TypeScriptを構成する

TypeScript オプションを構成するには、tsconfig.json ファイルを作成します。このファイルは、TypeScript にコードのコンパイル方法を指示します。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

ステップ3: Babelを構成する

Babel 設定用の .babelrc ファイルを作成します。このファイルは、TypeScript コードのトランスパイルに使用するプリセットを Babel に指示します。

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript"
  ]
}

ステップ4: Webpackを構成する

TypeScript ファイルをバンドルするために Webpack を設定するには、webpack.config.js ファイルを作成します。このファイルは、Webpack がさまざまな種類のファイルを処理する方法を定義します。

const path = require('path');

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

ステップ5: ソースファイルを作成する

アプリケーションのエントリ ポイントとして機能する src/index.ts ファイルを作成します。

console.log('Hello, TypeScript with Webpack and Babel!');

ステップ6: ビルドと実行

Webpack を使用して、TypeScript コードを 1 つの JavaScript ファイルにバンドルします。ビルド コマンドを実行して出力を生成します。

npx webpack

結論

TypeScript を Webpack および Babel と統合すると、最新の Web 開発のための強力なセットアップが提供されます。これらの手順に従うことで、開発者は TypeScript の型チェックと最新の JavaScript 機能を活用しながら、Webpack でコードを効率的にバンドルし、Babel でトランスパイルすることができます。