Multiple npm module formats

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.  

Modern bundlers like Webpack select the appropriate file based on the bundler configuration. By default, Webpack uses the module 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.  Below is a breakdown of the package.json fields and their corresponding file formats: 

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 Webpack documentation. 

As field names are not standardized for all module formats, Wijmo provides custom fields prefixed with wj- (like wj-esm2015). 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.  

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: 

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