How to use protocol inside webpack?

[april]

I'm trying to use protocol inside of webpack (with HtmlWebpackPlugin), and I've been banging my head against it for hours without much success.

All of the included JavaScript files set things directly on window, e.g. window.Mzp.Navigation = Navigation, instead of using export. Am I missing something terribly obvious?

Thanks!

[alexgibson]

The copy-webpack-plugin may be help here to copy the protocol source to your build directory.

I used that here as an example if that may be useful https://github.com/mozmeao/performance-dashboard/blob/master/webpack.config.js

[april]

Hmm, that's pretty non-ideal. It would be much better if I could simply import @mozilla-protocol/core and have access to the entire library, while letting tree-shaking minimize it. The CSS already works great this way, just not the JavaScript.

It's been a while since I've used a library that only worked with access to window, for this very reason.

[alexgibson]

Yeah, we only have a few pieces of JS currently to be honest, so i’m not sure how much you would really benefit from tree shaking here. We do have transpiling on our roadmap, but it’s not currently a top priority.

Either way, you can still use ES5/a global with web-pack for the time being.

[alexgibson]

@craigcook now that bedrock is also using webpack, I think it might be a good idea to enable our JS components to be imported. We could still keep the global variable I think for backward compatibility.

[craigcook]

This can be bundled in with #255