TypeScriptから生成したJavaScriptを圧縮(minify)してソースマップを有効にする方法

#1. はじめに

TypeScript から JavaScriptを生成する際にソースマップを生成することができます。これにより、デバッグする際にTypeScriptのソースコードに対してブレイクポイントを設定し、変数の中身を参照できます。

このJavaScriptのファイルサイズを減らすために圧縮(minify)すると、ソースマップが使えなくなるので、ソースマップを維持したままJavaScriptを圧縮する方法を説明します。

#2. 環境設定
開発環境はVisual Studio Code （以後vscodeと省略）を使います。
完成形のイメージは以下の通りです。

まず、空ディレクトリを作成し、npm からパッケージをインストールします。

npmパッケージは通常は指定ディレクトリへインストールされるが、「-g」を付けるとグローバルインストールされ、異なるディレクトリでも実行できる。

mkdir 【空ディレクトリ】
cd 【空ディレクトリ】
npm install -g typescript
npm install gulp gulp-uglify gulp-terser gulp-typescript gulp-sourcemaps --save-dev

次に、TypeScriptの初期設定ファイルを作成します。

tsc --init

次にvscodeで上記でコマンド実行したディレクトリを開き、tsconfig.json ファイルを開きます。
そこで「"sourceMap": true」 のコメントアウトを解除してください。

• tsconfig.json でソースマップを有効にする設定

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es5",       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",  /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "sourceMap": true,     /* Generates corresponding '.map' file. */
  }
}

次にvscodeでtsconfig.jsonと同じ階層に「gulpfile.js」を作成し、以下のように記述してください。

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const terser = require('gulp-terser');
const sourcemaps = require('gulp-sourcemaps');
const proj = require("gulp-typescript").createProject("tsconfig.json");

// 全てのtsファイルから js と js.map を生成
gulp.task('default', build);
// srcフォルダの変更を監視してビルド
gulp.task('watch', function(){
  gulp.watch('./src/**/*.ts', build);
});

function build() {
  return proj.src()
    .pipe(sourcemaps.init())
    .pipe(proj()).js
    // ES2015以降の場合はuglifyをterserに変更
    .pipe(uglify({
      // ステップ実行するためカンマ区切りで繋げない
      compress: {
        sequences: false
      }
    }))
    .pipe(sourcemaps.write('.', {
      sourceRoot: './',
      includeContent: false
    }))
    .pipe(gulp.dest("src"));
}

以上で設定完了です。
vscode からコンパイルするには、メニューのTerminal > Run Task >
「gulp: default」を選択すると、distフォルダにjsとjs.mapが生成されます。
デバッグする際には「ts, js, js.map」の3つを同じディレクトリへ入れてください。

今回説明した方法とは別に、サーバーからクライアントへ転送する際にgzip圧縮する方法があります。JavaScriptのminifyと組み合わせることで転送データ量を減らすことができます。