How to handle packaged modules with webpack

[chmanie]

I'm opening this in here as this seems to be how a lot of ipfs modules are being packaged with this tool (I personally had this experience with the js-libp2p module). When using it on the client side with webpack there's basically three possibilities:

1. Just do require('js-lib2p'). But this assumes that the source code has to be transpiled by webpack, even for this module. As exclude: /node_modules/ is a fairly popular (and sensible) setting in a lot of webpack configs, this would have to be explicitly included. That assumes a certain configuration (basically the same as the config used to build this module). But why would I want to transpile it again, when there seems to be a dist already available? Which brings us to option
2. require('js-lib2p/dist'), which sadly doesn't work as the dist doesn't export the generated var but just puts it into the global context (which doesn't work when compiled with webpack). That just leaves us with option
3. Include the file as a script tag and put it into the window. This might be great for experimenting or debugging but isn't really great in big production apps.

So my suggestion would be to export the dist module wrapped in a UMD wrapper (like this one: https://github.com/umdjs/umd/blob/master/templates/commonjsStrict.js). This would not break anything (as it'll still be on the window, when imported in a script tag) but would work with commonjs and AMD module compilers. I'd happily provide a PR to integrate that.

With webpack it's just a matter of setting the libraryTarget to the desired value here.

[dignifiedquire]

yes makes sense, want to do a pr?

[chmanie]

Yes, I can do that.

In the meantime I discovered a fourth method which a lot of projects are using in the space. This is providing 2 build outputs:

• lib/ which contains all the source files but just passed through babel (same directory structure)
• dist/ which contains the concatenated bundle (+ minified if needed)

The main entry in the package.json points to lib/index.js.

This is particularly useful for frontend code (which has sourcemaps). On the server side this might not be a great idea as you loose the original code.

[bejito]

same issue here, any ETA on merging the PR/fixing the issue ?