jsnext:browser?

[wearhere]

I have a package that targets Node and the browser but not isomorphically—I have a Node-specific script and a browser-specific script. I wish to bundle each of these in CJS and ES6 formats. How may I do this? Seems like jsnext:browser is required:

"main": "dist/node/index.js",
"jsnext:main": "dist/node/index.es2015.js",
"browser": "dist/browser/index.js",
"jsnext:browser": "dist/browser/index.es2015.js"

[nolanlawson]

@wearhere see #8 (comment)

[joaovieira]

@nolanlawson how's that resolved by the different bundlers (inc. Browserify, Rollup, Webpack) if I just require the module name? I guess we have to reference the path explicitly?

Use case for jsnext:browser:

I would like to have two versions of the my library for the browser as well, where the "next" version uses ES modules and does not polyfill the Fetch API, while the normal transpiles and polyfills. And I'd like users of those bundlers to be able to use the "next" version for the browser if they're not targeting older browsers.

[joaovieira]

Oh, does it resolve the main/jsnext:main path first and then try again which will hit the browser? Will give it a try 👍

Edit:
Even though that would not suffice my use case:

• main: transpiled code + isomorphic-fetch
• jsnext:main: ES modules source + isomorphic-fetch
• browser: same as main
• jsnext:browser: same as jsnext:main without isomorphic-fetch

[fregante]

@joaovieira you can do that as described by @nolanlawson

The browser field is a map:

"main":   "withfetch.js",
"module": "withfetch.esm.js",
"browser": {
  "withfetch.js":     "withfetch.browser.js",
  "withfetch.esm.js": "withoutfetch.browser.esm.js"
}

[joaovieira]

@bfred-it thanks, that guided me to it - browser paths are relative. I got it working with:

"main": "dist/lib.polyfill.js",
"module": "dist/lib.es6.polyfill.js",
"browser": {
  "./dist/lib.es6.polyfill.js": "./dist/lib.es6.js"
}