$ ryokkkke.com/TypeScript/tsconfig.json

outFile

概要

https://www.typescriptlang.org/tsconfig#outFile

{
  "outFile": "./dist/bundle.js"
}

これをtrueにすると、コンパイル結果を一つのファイルにまとめます。
バンドラ的機能ですね。
ただし、これを使用するには、moduleオプションがNONEAMDまたはSystemである必要があります。
outFileを指定した場合はoutDirオプションは無視されます。

詳細

// index.ts

import { hoge } from "./hoge";

export const func = async () => {
  return new Promise<string>((resolve) => {
    setTimeout(() => {
      resolve("5秒経ちました");
    }, 5000);
  });
};

console.log(hoge);
// hoge.ts

export const hoge = "HOGE";

まずは、"target": "ESNEXT"でかつmoduleは未指定で上記の 2 ファイルをコンパイルします。
targetESNEXTなのでmoduleの値はデフォルト値のES2015になります。

{
  "target": "ESNEXT",
  "outFile": "./dist/bundle.js"
}
src/hoge.ts:1:1 - error TS6131: Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'System'.

amdSystemにしろと怒られます。

次は、moduleAMDにしてコンパイルすると

{
  "target": "ESNEXT",
  "module": "AMD",
  "outFile": "./dist/bundle.js"
}

結果は下記のようになります。

// ./dist/bundle.js

define("hoge", ["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.hoge = void 0;
    exports.hoge = "HOGE";
});
define("index", ["require", "exports", "hoge"], function (require, exports, hoge_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.func = void 0;
    exports.func = async () => {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve("5秒経ちました");
            }, 5000);
        });
    };
    console.log(hoge_1.hoge);
});

次は、moduleSystemにして同じコードをコンパイルすると

{
  "target": "ESNEXT",
  "module": "System",
  "outFile": "./dist/bundle.js"
}

結果は下記のようになります。

// bundle.js

System.register("hoge", [], function (exports_1, context_1) {
    "use strict";
    var hoge;
    var __moduleName = context_1 && context_1.id;
    return {
        setters: [],
        execute: function () {
            exports_1("hoge", hoge = "HOGE");
        }
    };
});
System.register("index", ["hoge"], function (exports_2, context_2) {
    "use strict";
    var hoge_1, func;
    var __moduleName = context_2 && context_2.id;
    return {
        setters: [
            function (hoge_1_1) {
                hoge_1 = hoge_1_1;
            }
        ],
        execute: function () {
            exports_2("func", func = async () => {
                return new Promise((resolve) => {
                    setTimeout(() => {
                        resolve("5秒経ちました");
                    }, 5000);
                });
            });
            console.log(hoge_1.hoge);
        }
    };
});

どちらも元は 2 つのファイルだった内容が一つのファイルにまとまっています。