CommonJSモジュールからESモジュールへの変換 in JavaScript

今でも様々なドキュメントで、 CommonJSスタイルのモジュールインポートを見かけることがあります。 これらのインポートを標準的なESモジュールに変換する方法を 学ぶ必要があります。

CommonJSでは、インポートは requireコマンドを使用して行われ、 そのパラメータとしてモジュールへのパスが指定されます。 コマンドの結果は変数に格納されます:

src/index.jslet math = require('./math');

このコードをESスタイルに書き換えてみましょう。 まず、CommonJSではファイルの拡張子.jsが 指定されないのに対し、ESモジュールでは指定される点に注意してください。

次に、モジュールがデフォルトエクスポートか 通常のエクスポートかによって処理が異なります。 CommonJSでは違いはありませんが、 ESモジュールでは違いがあります。 通常、コード例からその違いがわかりますが、 単に両方のインポート方法を試してみることもできます。

今回のケースでは、示されたインポートは 以下のいずれかの形に書き換えられます:

src/index.jsimport math from './math.js';

または、以下のような形になります:

src/index.jsimport * as math from './math.js';

src/index.jslet {square, cube} = require('./math');

src/index.jslet math = require('./math');
let res  = math.square(2) + math.cube(3);

src/index.jslet sum = require('./sum');
let res = sum([1, 2, 3]);