Gulp/Webpack/Rollup を駆使！ TypeScript ビルドで src フォルダ構成を dist へ

2024-05-26

以下は、TypeScript 3 で src フォルダ構造を維持して dist フォルダにビルドする方法です。

tsconfig.json ファイルを作成する

まず、プロジェクトのルートディレクトリに tsconfig.json ファイルを作成する必要があります。このファイルには、コンパイルプロセスの設定を記述します。

{
  "compilerOptions": {
    "outDir": "dist",                   // コンパイルされた JavaScript ファイルの出力先ディレクトリ
    "rootDir": "src",                   // コンパイル対象の TypeScript ファイルのルートディレクトリ
    "preserveDirStructure": true        // ソース ディレクトリのディレクトリ構造を維持する
  }
}

上記の例では、outDir オプションでコンパイルされた JavaScript ファイルの出力先ディレクトリを dist に設定しています。また、rootDir オプションでコンパイル対象の TypeScript ファイルのルートディレクトリを src に設定しています。そして、preserveDirStructure オプションを true に設定することで、ソースディレクトリのディレクトリ構造が維持されます。

tsc コマンドを実行する

tsconfig.json ファイルを作成したら、以下のコマンドを実行して TypeScript ファイルをコンパイルすることができます。

tsc

このコマンドを実行すると、src フォルダ内のすべての TypeScript ファイルが dist フォルダに JavaScript ファイルとしてコンパイルされます。

TypeScript 3 で src フォルダ構造を維持して dist フォルダにビルドするサンプルコード

src フォルダ構造

src
├── components
│   ├── button.ts
│   └── modal.ts
├── index.ts
└── utils
    └── math.ts

この例では、src フォルダ内に components フォルダと utils フォルダがあり、それぞれに TypeScript ファイルが格納されています。

{
  "compilerOptions": {
    "outDir": "dist",
    "rootDir": "src",
    "preserveDirStructure": true
  }
}

この tsconfig.json ファイルは、コンパイルされた JavaScript ファイルの出力先ディレクトリを dist に設定し、コンパイル対象の TypeScript ファイルのルートディレクトリを src に設定し、ソースディレクトリのディレクトリ構造を維持するように設定しています。

index.ts ファイル

import { Button, Modal } from './components';
import { MathUtil } from './utils/math';

const button = new Button('Click me');
button.onClick(() => {
  const modal = new Modal('Hello, world!');
  modal.show();
});

console.log(MathUtil.add(1, 2)); // 3

この index.ts ファイルは、components フォルダと utils フォルダにあるモジュールをインポートして使用しています。

ビルド

tsc

このコマンドを実行すると、以下のようになります。

dist
├── components
│   ├── button.js
│   └── modal.js
├── index.js
└── utils
    └── math.js

dist フォルダには、src フォルダのディレクトリ構造が維持された状態で、JavaScript ファイルが生成されます。

説明

このサンプルコードでは、以下の点に注目してください。

tsconfig.json ファイルを使用して、コンパイルプロセスの設定を指定しています。
src フォルダ内のすべての TypeScript ファイルをコンパイルするように tsc コマンドを実行しています。
コンパイルされた JavaScript ファイルは、src フォルダのディレクトリ構造を維持して dist フォルダに生成されます。

TypeScript 3 で src フォルダ構造を維持して dist フォルダにビルドするその他の方法

Gulp を使用する

Gulp は、タスクランナーと呼ばれる JavaScript のライブラリです。タスクランナーを使用すると、ファイルのコンパイル、テスト、配信などのタスクを自動化することができます。

const gulp = require('gulp');
const ts = require('gulp-typescript');
const tsConfig = require('./tsconfig.json');

gulp.task('build', () => {
  return gulp.src('src/**/*.ts')
    .pipe(ts(tsConfig))
    .pipe(gulp.dest('dist'));
});

このコードは、以下のことを行います。

gulp-typescript プラグインを使用して、src フォルダ内のすべての TypeScript ファイルをコンパイルします。
コンパイルされた JavaScript ファイルを dist フォルダに出力します。

この方法を使用するには、まず gulp と gulp-typescript パッケージをインストールする必要があります。

npm install gulp gulp-typescript

次に、上記のコードを gulpfile.js というファイルに保存し、以下のコマンドを実行してビルドすることができます。

gulp build

Webpack は、モジュールバンドラーと呼ばれる JavaScript のライブラリです。モジュールバンドラーを使用すると、複数のモジュールを 1 つのファイルにまとめることができます。

const webpack = require('webpack');
const path = require('path');

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

npm install webpack ts-loader

webpack

import rollup from 'rollup';
import ts from '@rollup/plugin-typescript';

const options = {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
    format: 'cjs',
  },
  plugins: [
    ts(),
  ],
};

rollup(options)
  .then((bundle) => {
    console.log('Build completed!');
  })
  .catch((error) => {
    console.error(error);
  });