# Multiple npm module formats

Learn how wijmo modules are packaged and published on npm in this tutorial

## Content

<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">Wijmo's npm packages come in different formats, combining two aspects – language versions and module formats. Each combination of these aspects results in a specific file within the package. The package.json file in the package directory points to these files using particular fields. </span><span style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Segoe UI;
mso-font-kerning:0pt;mso-ligatures:none"> </span>
<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">Modern bundlers like Webpack select the appropriate file based on the bundler configuration. By default, Webpack uses the </span><span style="font-family:Consolas;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">module</span><span style="font-family:Aptos,sans-serif;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;mso-ligatures:none;
mso-ansi-language:EN-US" lang="EN-US"> field to determine which file to use. If the bundler doesn't have this capability or the module field is not present, it defaults to the main field in package.json to resolve module name to a specific .js file. </span><span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none"> </span><span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">Below is a breakdown of the package.json fields and their corresponding file formats:</span><span style="font-family:Aptos,sans-serif;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;mso-ligatures:none"> </span>

| **<span lang="EN-US" style="font-size:12.0pt;
line-height:115%;font-family:'Aptos',sans-serif;mso-fareast-font-family:'Times New Roman';
mso-bidi-font-family:'Times New Roman';mso-font-kerning:0pt;mso-ligatures:none;
mso-ansi-language:EN-US;mso-fareast-language:JA;mso-bidi-language:AR-SA">Language version + Module formats</span>**<span style="font-size:12.0pt;line-height:
115%;font-family:'Aptos',sans-serif;mso-fareast-font-family:'Times New Roman';
mso-bidi-font-family:'Times New Roman';mso-font-kerning:0pt;mso-ligatures:none;
mso-ansi-language:EN-IN;mso-fareast-language:JA;mso-bidi-language:AR-SA"> </span> | **<span lang="EN-US" style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Times New Roman;
mso-font-kerning:0pt;mso-ligatures:none;mso-ansi-language:EN-US">Field name</span>** | **<span lang="EN-US" style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Times New Roman;
mso-font-kerning:0pt;mso-ligatures:none;mso-ansi-language:EN-US">File formats</span>** |
| ---------------------------------- | ---------- | ------------ |
| ES5 + CommonJS (default)<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Times New Roman;mso-font-kerning:0pt;mso-ligatures:
none"> </span> | <span lang="EN-US" style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US">main</span> | <span lang="EN-US" style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US">index.js</span> |
| <span lang="EN-US" style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US">ES5 + ESM</span> | <span lang="EN-US" style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US">module, esm5, wj-esm5</span> <span style="font-family:Aptos,sans-serif;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Times New Roman;mso-font-kerning:0pt;mso-ligatures:
none"> </span> | <span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">es5-esm.js</span> |
| <span lang="EN-US" style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US">ES2015 + CommonJS</span>  | <span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">es2015Cjs, wj-es2015Cjs</span> | <span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">es2015-commonjs.js</span> |
| <span lang="EN-US" style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US">ES2015 + ESM</span> | <span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">esm2015, es2015, wj-esm2015</span> | <span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Times New Roman;mso-font-kerning:
0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">es2015-esm.js</span> |

<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">In Wijmo's case, it is the index.js file that contains the most compatible “ES5 + CommonJS” format. However, you can set your preferences by adjusting the Webpack's configuration.  For example, to prioritize Wijmo packages in the ES2015 + ESM format, you can set Webpack's resolve.mainFields option accordingly. To know more about this option, see </span>[<span style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Segoe UI;
color:#467886;mso-font-kerning:0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">Webpack</span>](https://webpack.js.org/configuration/resolve/#resolvemainfields)<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;mso-ligatures:none;
mso-ansi-language:EN-US"> </span>[<span style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Segoe UI;
color:#467886;mso-font-kerning:0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">documentation</span>](https://webpack.js.org/configuration/resolve/#resolvemainfields)<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;mso-ligatures:none;
mso-ansi-language:EN-US" lang="EN-US">.</span><span style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Segoe UI;
mso-font-kerning:0pt;mso-ligatures:none"> </span>
<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">As field names are not standardized for all module formats, Wijmo provides custom fields prefixed with </span><span style="font-family:Consolas;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;mso-ligatures:none;
mso-ansi-language:EN-US" lang="EN-US">wj-</span><span style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Segoe UI;
mso-font-kerning:0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US"> (like </span><span style="font-family:Consolas;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;mso-ligatures:none;
mso-ansi-language:EN-US" lang="EN-US">wj-esm2015</span><span style="font-family:
Aptos,sans-serif;mso-fareast-font-family:Times New Roman;mso-bidi-font-family:
Segoe UI;mso-font-kerning:0pt;mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">). We assume that fields with such names are not used in other packages, so they allow you to define a preferred module format specifically for Wijmo packages without affecting other packages. </span><span style="font-family:Aptos,sans-serif;
mso-fareast-font-family:Times New Roman;mso-bidi-font-family:Segoe UI;
mso-font-kerning:0pt;mso-ligatures:none"> </span>
<span style="font-family:Aptos,sans-serif;mso-fareast-font-family:
Times New Roman;mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;
mso-ligatures:none;mso-ansi-language:EN-US" lang="EN-US">For example, the below configuration in a webpack.config.js file forces Webpack to include Wijmo packages in the ES2015 + ESM format, and only affects Wijmo packages:</span><span style="font-family:Aptos,sans-serif;mso-fareast-font-family:Times New Roman;
mso-bidi-font-family:Segoe UI;mso-font-kerning:0pt;mso-ligatures:none"> </span>

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