Add bundler support

[chradek]

Changes

The rhea package includes a browserified bundle in its dist folder that can be used to run rhea in a browser. This change updates the package.json to use the browser field so that bundlers (webpack for example) understand how to transform the node.js code when creating a JavaScript bundle.

Motivation

This change reduces the friction for dependent libraries to support being used in browser environments. Currently, a library that depends on rhea would need to create a browser bundle and distribute that as well. This makes the dependent library depend on an exact version of rhea (in the browser build) even if its package.json specifies a range, which also means a new version of the dependent library needs to be released anytime rhea is updated.

Testing

One way to test how this change impacts bundler tools is to create a new npm project that depends on rhea and imports it, then create a bundle using a bundler. I tested using webpack/webpack-cli.

index.js

const rhea = require('rhea');

npx webpack-cli ./index.js -o ./bundle.js

Output before changes

Hash: 8fc8c4f0f2bdf3440140
Version: webpack 4.41.5
Time: 595ms
Built at: 01/23/2020 4:08:17 PM
 1 asset
Entrypoint main = bundle.js
[13] ./index.js 29 bytes {0} [built]
[16] (webpack)/buildin/global.js 472 bytes {0} [built]
    + 31 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in ./node_modules/rhea/lib/connection.js
Module not found: Error: Can't resolve 'fs' in 'C:\workplace\testing\event-hubs\webpack\test-app\node_modules\rhea\lib'
 @ ./node_modules/rhea/lib/connection.js 27:9-22
 @ ./node_modules/rhea/lib/container.js
 @ ./index.js

ERROR in ./node_modules/rhea/lib/container.js
Module not found: Error: Can't resolve 'net' in 'C:\workplace\testing\event-hubs\webpack\test-app\node_modules\rhea\lib'
 @ ./node_modules/rhea/lib/container.js 24:10-24
 @ ./index.js

ERROR in ./node_modules/rhea/lib/connection.js
Module not found: Error: Can't resolve 'net' in 'C:\workplace\testing\event-hubs\webpack\test-app\node_modules\rhea\lib'
 @ ./node_modules/rhea/lib/connection.js 30:10-24
 @ ./node_modules/rhea/lib/container.js
 @ ./index.js

ERROR in ./node_modules/rhea/lib/container.js
Module not found: Error: Can't resolve 'tls' in 'C:\workplace\testing\event-hubs\webpack\test-app\node_modules\rhea\lib'
 @ ./node_modules/rhea/lib/container.js 25:10-24
 @ ./index.js

ERROR in ./node_modules/rhea/lib/connection.js
Module not found: Error: Can't resolve 'tls' in 'C:\workplace\testing\event-hubs\webpack\test-app\node_modules\rhea\lib'
 @ ./node_modules/rhea/lib/connection.js 31:10-24
 @ ./node_modules/rhea/lib/container.js
 @ ./index.js

Output after changes

Hash: 5e5a445de10d0a7629b7
Version: webpack 4.41.5
Time: 718ms
Built at: 01/23/2020 4:09:08 PM
    Asset     Size  Chunks             Chunk Names
bundle.js  125 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[13] net (ignored) 15 bytes {0} [built]
[14] tls (ignored) 15 bytes {0} [built]
[15] ./index.js 29 bytes {0} [built]
[18] (webpack)/buildin/global.js 472 bytes {0} [built]
[30] fs (ignored) 15 bytes {0} [built]
    + 31 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

I also tested these changes using our library that has rhea as a transitive dependency and was able to send and receive messages using websockets.

Additional Info

Link to the package browser field spec: https://github.com/defunctzombie/package-browser-field-spec

Setting fs/net/tls to false makes it so bundlers will return an empty object when they encounter one of these imports. This looks consistent with what's happening in the browserified bundle that's distributed.

[grs]

Thank you @chradek !

[chradek]

Thanks for merging @grs, really appreciate how responsive you are! I'll be watching for the next release 😄

[grs]

@chradek you are welcome, I appreciate your use of- and contributions to- the library. 1.0.17 now published