Request for browser property in package.json

[striker93]

Hello
I've just started using this library and I thought i would start by setting up some webpack prep work. I would like to take advantage of the webpack's resolve mainfields option but noticed it doesn't exist for the library in the package.json. Could you please update it? Would really help with bundling dist file of browser rather than using non minified lib/esm version when bundling. cheers.

[smalluban]

Hey! The Webpack feature that you want to use should be set in your webpack.config.js file, not taken from the library package.json. Look at the docs, where you can find code example:

module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main']
  }
};

While libraries should contain one of the following fields: "main", "module" or "browser". The first two are in hybrids package.json. The last one is not relevant, as the library is pure for the browsers only.

Moreover, what you want to do is something, that should be avoided. Built version of the library is only here for those who have to use it directly by <script> tag. It also doesn't include HMR support and has less verbose errors - it is only for production usage.

If you use Webpack, you should leave default behavior of the Webpack configuration (without set mainFields) and import library like this:

import { define } from 'hybrids';

Even with this code, you don't have to transpile code to es5 as it is traspiled already. Only src path has ES2015 syntax.

To sum up, this is the mapping from package.json:

• module: esm/index.js - ES5 with import / export syntax
• main: lib/index.js - es5 with commonjs
• dist/hybrids.js - no entry in package.json - only for CDN like https://unpkg.com/hybrids/dist/hybrids.js

Feel free to re-open, if you have other questions related to this subject.

[striker93]

Thanks for the clarification .I originally raised this question so as to have less bundle size for prod but webpack can minify the es6 module i guess. I have more clarity now, but one doubt.

It also doesn't include HMR support and has less verbose errors - it is only for production usage.

I am using webpack not for transpiling but for bundling (with two configuration dev and prod). If i bundle the code as is with import will i be getting HMR in prod code also? if yes then i how can i turn it off ?

[smalluban]

You don't have to worry. The library uses process.env.NODE_ENV value, which is provided by the Webpack and other bundlers. If you use production mode in Webpack it removes all not necessary code for production use.