`browser` vs `module`

[stereobooster]

1. browser was added as an intention to ship browser specific builds via npm (along with node.js specific builds)
2. module was added as intention to ship modern js (ES2015 aka ES6 or later)

main --(1)--> browser
 |               |
 |               |
(2)              |
 |               |
 ˅               ˅
module --------> ?

As a result, there is obvious hole - how do you deliver modern js for browser specific builds

Suggested solutions:

• module-browse
• esm: true
• esnext

Related:

• Draft ES Module Interoperability
• In Defense of .js
• es-module-loader
• reify

[jskrzypek]

@defunctzombie has a spec for the browser field here: https://github.com/defunctzombie/package-browser-field-spec

This is what webpack is using and references in their docs (here: https://webpack.js.org/configuration/resolve/#resolve-aliasfields)

[stereobooster]

@jskrzypek yes I know

[kevlened]

The solution by the PouchDB team seems to be based on that spec: rollup/rollup-plugin-node-resolve#8 (comment)

I didn't realize the browser field could be a map. Using it that way allows both browser and node ES6 modules in the same library.

This method is supported in rollup, it appears to be supported in webpack, they reference a browser map in JSPM, and it's in the browserify handbook.

I think that's enough support to say it's a solution, unless I misunderstand the problem you're trying to solve?

[stereobooster]

proposed solution with browser

"main":   "xyz.js",
"module": "xyz.esm.js",
"browser": {
  "xyz.js":     "xyz.browser.js",
  "xyz.esm.js": "xyz.browser.esm.js"
}

If you use require("xyz") - you get xyz.js e.g. main
If you use import "xyz" - you get xyz.esm.js e.g. module
If you use require("xyz") and you target browser - you get what? If your answer xyz.browser.js, what bundlers support this?
If you use import "xyz" and you target browser - you get what? If your answer xyz.browser.esm.js, what bundlers support this?

[kevlened]

In rollup and webpack, when targeting the browser and using the following package.json:

import "xyz" resolves to xyz.browser.esm.js
require("xyz") resolves to xyz.browser.esm.js by default
you have to disallow "module" field resolution to get require("xyz") to be xyz.browser.js

"main":   "xyz.js",
"module": "xyz.esm.js",
"browser": {
  "./xyz.js":     "./xyz.browser.js",
  "./xyz.esm.js": "./xyz.browser.esm.js"
}

Note: Relative paths are required as indicated by this comment

I haven't tested in JSPM and browserify, but PouchDB is using this method, so I assume it works

[stereobooster]

Webpack always assume browser, but otherwise pretty close. Thanks for the tip. Experiment: https://github.com/stereobooster/main-module-browser-test

[kevlened]

Glad it worked for you. You can also configure mainFields to exclude the browser (or module) field: https://webpack.js.org/configuration/resolve/#resolve-mainfields