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

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

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

let math = require('./math');

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

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

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

import math from './math.js';

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

import * as math from './math.js';

以下のコードを ESモジュールスタイルで書き換えてください:

let {square, cube} = require('./math');

以下のコードを ESモジュールスタイルで書き換えてください:

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

以下のコードを ESモジュールスタイルで書き換えてください:

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