다양한 npm 모듈 형식

Wijmo의 npm 패키지는 언어 버전과 모듈 형식이라는 두 가지 요소를 조합하여 다양한 형식으로 제공됩니다. 이 두 요소의 조합에 따라 패키지 내에서 특정 파일이 생성됩니다. 패키지 디렉터리에 있는 package.json 파일은 특정 필드를 통해 이러한 파일들을 가리킵니다.

Webpack과 같은 최신 번들러는 번들러 설정에 따라 적절한 파일을 선택합니다. 기본적으로 Webpack은 module 필드를 사용하여 어떤 파일을 사용할지 결정합니다. 만약 번들러가 이러한 기능을 지원하지 않거나 module 필드가 없는 경우, main 필드를 기준으로 모듈 이름을 특정 .js 파일로 연결합니다.

아래는 package.json의 각 필드와 그에 대응하는 파일 형식을 정리한 표입니다:

Wijmo에서는 index.js 파일이 가장 범용적으로 호환되는 "ES5 + CommonJS" 형식입니다. 그러나 Webpack의 설정을 조정하여 원하는 형식을 우선적으로 사용할 수 있습니다.

예를 들어, Wijmo 패키지를 ES2015 + ESM 형식으로 우선 적용하고 싶다면, Webpack의 resolve.mainFields 옵션을 설정하면 됩니다. 이에 대한 자세한 내용은 Webpack 공식 문서를 참고하세요.

또한, 모든 모듈 형식에 대해 표준화된 필드명이 존재하지 않기 때문에, Wijmo는 wj- 접두사를 붙인 사용자 정의 필드(예: wj-esm2015)를 제공합니다. 이는 다른 패키지에는 영향을 주지 않으면서, Wijmo 패키지에만 선호하는 모듈 형식을 지정할 수 있게 해줍니다.

예를 들어, 아래와 같이 webpack.config.js 파일을 설정하면, Wijmo 패키지에 대해서만 ES2015 + ESM 형식을 사용하도록 강제할 수 있습니다:

resolve: {
    mainFields: ['wj-esm2015', 'module', 'main'],
    ...
},