本稿では、tsconfigのmoduleの設定値によってどのようなJavaScriptコードが生成されるかを確認するものである。次の設定値を試す: commonjs, amd, system, umd, es6, es2015, esnext, none。
コンパイルしてみるTypeScriptコード。
main.ts
export const a = 1;
未指定または、"commonjs"
main.js
"use strict";
exports.__esModule = true;
exports.a = 1;
- CommonJSと呼ばれる規格。
- Node.jsなどサーバサイドコードで一般的。
"amd"
main.js
define(["require", "exports"], function (require, exports) {
"use strict";
exports.__esModule = true;
exports.a = 1;
});
- Asynchronous Module Definition (AMD)と呼ばれる規格。
- クライアントサイドコードで一般的。
"system"
main.js
System.register([], function (exports_1, context_1) {
"use strict";
var a;
var __moduleName = context_1 && context_1.id;
return {
setters: [],
execute: function () {
exports_1("a", a = 1);
}
};
});
- SystemJSとESモジュールローダーに対応。
- systemjs/systemjs: Dynamic ES module loader
- AMD, CommonJS形式に対応している。
"umd"
main.js
(function (factory) {
if (typeof module === "object" && typeof module.exports === "object") {
var v = factory(require, exports);
if (v !== undefined) module.exports = v;
}
else if (typeof define === "function" && define.amd) {
define(["require", "exports"], factory);
}
})(function (require, exports) {
"use strict";
exports.__esModule = true;
exports.a = 1;
});
- Universal Module Definition (UMD)と呼ばれる規格。
- AMDとCommonJSの両方をサポートする。
"es6", "es2015", "esnext"
main.js
export var a = 1;
- ES6 Moduleと呼ばれる規格。
-
exportキーワードのブラウザ対応状況はexport - JavaScript | MDNで確認できる。 - Node.jsでは
--experimental-modulesオプションを使うとES6 Moduleが使える。
"none"
main.ts:1:1 - error TS1148: Cannot use imports, exports, or module augmentations when '--module' is 'none'.
1 export const a = 1;
~~~~~~~~~~~~~~~~~~~
Found 1 error.