概要
https://www.typescriptlang.org/tsconfig#outFile
{
"outFile": "./dist/bundle.js"
}
これをtrue
にすると、コンパイル結果を一つのファイルにまとめます。
バンドラ的機能ですね。
ただし、これを使用するには、moduleオプションがNONE
、AMD
または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 ファイルをコンパイルします。
targetがESNEXT
なので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'.
amd
かSystem
にしろと怒られます。
次は、moduleをAMD
にしてコンパイルすると
{
"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);
});
次は、moduleをSystem
にして同じコードをコンパイルすると
{
"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 つのファイルだった内容が一つのファイルにまとまっています。