# 다양한 npm 모듈 형식

## Content

Wijmo의 npm 패키지는 **언어 버전**과 **모듈 형식**이라는 두 가지 요소를 조합하여 다양한 형식으로 제공됩니다. 이 두 요소의 조합에 따라 패키지 내에서 특정 파일이 생성됩니다. 패키지 디렉터리에 있는 `package.json` 파일은 특정 필드를 통해 이러한 파일들을 가리킵니다.
Webpack과 같은 최신 번들러는 번들러 설정에 따라 적절한 파일을 선택합니다. 기본적으로 Webpack은 `module` 필드를 사용하여 어떤 파일을 사용할지 결정합니다. 만약 번들러가 이러한 기능을 지원하지 않거나 `module` 필드가 없는 경우, `main` 필드를 기준으로 모듈 이름을 특정 `.js` 파일로 연결합니다.
아래는 `package.json`의 각 필드와 그에 대응하는 파일 형식을 정리한 표입니다:

| **언어 버전 + 모듈 형식** | **필드 이름** | **파일 형식** |
| ------------- | ----- | ----- |
| ES5 + CommonJS (기본) | main | index.js |
| ES5 + ESM | module, esm5, wj-esm5 | es5-esm.js |
| ES2015 + CommonJS | es2015Cjs, wj-es2015Cjs | es2015-commonjs.js |
| ES2015 + ESM | esm2015, es2015, wj-esm2015 | es2015-esm.js |

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

예를 들어, Wijmo 패키지를 **ES2015 + ESM** 형식으로 우선 적용하고 싶다면, Webpack의 `resolve.mainFields` 옵션을 설정하면 됩니다. 이에 대한 자세한 내용은 [Webpack 공식 문서](https://webpack.js.org/configuration/resolve/#resolvemainfields)를 참고하세요.
또한, 모든 모듈 형식에 대해 표준화된 필드명이 존재하지 않기 때문에, Wijmo는 `wj-` 접두사를 붙인 사용자 정의 필드(예: `wj-esm2015`)를 제공합니다. 이는 다른 패키지에는 영향을 주지 않으면서, **Wijmo 패키지에만** 선호하는 모듈 형식을 지정할 수 있게 해줍니다.
예를 들어, 아래와 같이 `webpack.config.js` 파일을 설정하면, **Wijmo 패키지에 대해서만** ES2015 + ESM 형식을 사용하도록 강제할 수 있습니다:

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