JavaScript에서 CommonJS 모듈을 ES 모듈로 변환하기

아직도 다양한 문서에서 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]);