Add examples of required setup/config to bundle IPFS for the browser using popular bundlers

[alanshaw]

• Create react app (see Info: Fails to build a minified create-react-app with ipfs #1321)
• Webpack
• Browserify
• Parcel (see Parcel fails to build js-ipfs (and many other things) #1344)
• Vue (docs: add Vue browser example #2302)

[0x-r4bbit]

We should introduce documentation for that as well in case this doesn't exist yet. Those could then link to the examples.

[alanshaw]

...and (on a slightly different but related topic) run our tests against our pre-bundled code.

[mitra42]

Coincidentally ... I posted a comment in #1131 about this today, there is an example for webpack, however it ONLY works with the embedded webpack server, the normal webpack --mode development or webpack --mode production fail because of the "loaders" keyword that only seems to work for the embedded webpack server.

Also ... I think there should be an example with and without react, to show that its actually relatively simple to include IPFS without react except for the nasty issues with UglifyJS.

[alanshaw]

It would be better if IPFS just worked^tm with uglify defaults.

[mikeal]

It would be better if IPFS just workedtm with uglify defaults.

I don't think that is practical. Uglify has given up on supporting versions of ES past ES5 natively and recommend transpiling with babel before using uglify. But, if you have to use babel anyway, you're better off using babel-minify. Even when the final output is ES5 the minification can be done a lot better.

It's just not practical to say that nowhere in the dep tree will someone not use a feature past ES5. We're sort of fighting against the tide on this one.

[mitra42]

I don't know about Uglify, but I do know that IPFS is the only thing in any of the code we include that doesn't pass through webpack with standard unmodified options i.e. if there is any configuration then it is somehow included in the package itself.

[mikeal]

Sorry, I should have been clearer. I was only referring to Alan's "just work" comment, not to using uglify with webpack (which is already running through babel).

Just looked through the other issue and it looks like we require the unused option to be false, which turns off the removal of unused functions.

This means either:

• We're doing something very fancy/clever/horrible to address functions by a dynamic string value.
• There's a bug in UglifyJS.

If someone could track down the exact module or file that is failing I bet we could find and resolve it pretty easily. If the problem is on our end it's probably an issue in other minifiers as well, they may just be de-optimizing the minification rather than failing.

[mitra42]

I believe (but can't be sure) its the former - as discussed in #1131

[alanshaw]

It's just not practical to say that nowhere in the dep tree will someone not use a feature past ES5. We're sort of fighting against the tide on this one.

I totally agree. I was referring to the uglify config passed to uglifyjs-webpack-plugin in #1131

[mitra42]

And @mikeal - the question is whether there are other sites that handle ES6 and Webpack - all our code is ES6, and it packs with webpack --mode prodction just fine, with default settings, (along with all its dependencies) EXCEPT for IPFS.

I believe its a problem with IPFS's use of class/function names (as discussed in # 1131), and maybe not providing whatever configuration is required inside the IPFS module to make webpack behave correctly.