TypeScriptでCommonJSとES Modulesを混在させる: esModuleInterop徹底解説
TypeScriptにおけるesModuleInteropの理解
デフォルト値: false
有効な値: true または false
esModuleInteropの役割
従来のJavaScriptモジュールシステムであるCommonJSは、module.exportsを使用してモジュールを公開します。一方、ES Modulesは、exportキーワードを使用してモジュールを公開します。
esModuleInteropを有効にすると、TypeScriptコンパイラは、CommonJSモジュールをES Modulesとして読み込むことができるように変換します。これは、以下の利点があります。
- CommonJSモジュールとES Modulesを混在させることができる。
- TypeScriptコードをNode.js環境とブラウザ環境の両方で実行できる。
esModuleInteropを使用するには、tsconfig.jsonファイルに以下のオプションを追加します。
{
"compilerOptions": {
"esModuleInterop": true
}
}
この設定を有効にすると、以下のコードのように、CommonJSモジュールをES Modulesとして読み込むことができます。
import * as module from "commonjs-module";
// module.exportsを使用する
const value = module.exports.value;
esModuleInteropを使用する際には、以下の点に注意する必要があります。
- CommonJSモジュールは、ES Modulesと同じように動作するとは限りません。
esModuleInteropは、CommonJSとES Modulesの両方のモジュールシステムを混在させる際に役立ちます。ただし、使用には注意が必要です。
index.ts
import * as express from "express";
const app = express();
app.get("/", (req, res) => {
res.send("Hello, world!");
});
app.listen(3000);
package.json
{
"name": "my-app",
"version": "1.0.0",
"description": "My TypeScript application",
"main": "index.ts",
"dependencies": {
"express": "^4.17.1"
},
"devDependencies": {
"typescript": "^4.6.2"
}
}
このコードを実行するには、以下のコマンドを実行します。
tsc -p .
次に、以下のコマンドを実行してサーバーを起動します。
node index.js
ブラウザで http://localhost:3000 を開くと、「Hello, world!」と表示されます。
以下のサンプルコードは、esModuleInteropを使用してCommonJSモジュールをES Modulesとして読み込むさまざまな方法を示しています。
- デフォルトエクスポートを使用する
import express from "express";
const app = express();
app.get("/", (req, res) => {
res.send("Hello, world!");
});
app.listen(3000);
import { app } from "express";
app.get("/", (req, res) => {
res.send("Hello, world!");
});
app.listen(3000);
import * as express from "express";
import { app, Server } from "express";
const server = new Server(app);
server.listen(3000);
esModuleInteropは、CommonJSとES Modulesの両方のモジュールシステムを混在させる際に役立ちます。上記のサンプルコードを参考に、esModuleInteropを使用してコードを記述してみてください。
CommonJSモジュールをES Modulesとして読み込む他の方法
moduleオブジェクトを使用する
CommonJSモジュールは、moduleオブジェクトを使用してモジュールを公開します。このオブジェクトを使用して、ES Modulesとして読み込むためのデフォルトエクスポートを作成することができます。
import * as module from "commonjs-module";
const value = module.exports.value;
export default value;
exportキーワードを使用する
CommonJSモジュールをES Modulesとして読み込むために、exportキーワードを使用してモジュールを公開することができます。
import * as module from "commonjs-module";
export const value = module.exports.value;
Babelを使用する
Babelは、JavaScriptコードを変換するツールです。Babelを使用して、CommonJSモジュールをES Modulesに変換することができます。
babel --presets @babel/preset-env index.ts
Rollupを使用する
Rollupは、JavaScriptモジュラーバンドラーです。Rollupを使用して、CommonJSモジュールを含む複数のモジュールを1つのES Moduleにバンドルすることができます。
rollup -i index.ts -o bundle.js
上記の方法のいずれかを使用して、CommonJSモジュールをES Modulesとして読み込むことができます。どの方法を選択するかは、プロジェクトの要件によって異なります。
typescript
