Expose Members loader for webpack

Inspiration

I was using the Expose loader for webpack, because I simply needed to expose some of the variables of legacy code (now served with Webpack and adapted to an ES6 approach) to the window scope.

Rapidly I realized that needed to use the Exports loader together with the Expose loader for webpack, until I reached the point where by exporting several members of a module, I needed to declared all of them individually to the global scope.

Like:

1import 'expose-members?mySpace.functionA,mySpace.functionB,objectA!exports?functionA,functionB,objectA!imports?Something=>window.something!legacy/javascript/app';

Of course I could have done twice or more the same import using only one default exports together with an expose, like:

1import 'expose-members?mySpace.functionA!exports?functionA!legacy/javascript/app';
2import 'expose-members?mySpace.functionB!exports?functionB!legacy/javascript/app';
3import 'expose-members?objectA!exports?objectA!legacy/javascript/app';

But that's not exactly the proper way to solve it. So decided to extend the original Expose loader for webpack.

Feel free to give feedback.

Usage

1require("expose-members?memberA,memberB!./file.js");
2// Exposes the export members for file.js to the global context on properties "memberA" and "memberB".
3// In web browsers, window.memberA and window.memberB is then available.

This line works to expose React.PropTypes to the web browser:

1require("expose-members?PropTypes!react");

Thus, window.PropTypes is then available to any extension that wants to use it.

Alternately, you can set this in your config file:

1module: {
2  loaders: [
3    { test: require.resolve("react"), loader: "expose-members?PropTypes" }
4  ]
5}

Also for multiple expose you can use ! in loader string:

1module: {
2  loaders: [
3    { test: require.resolve("myModule"), loader: "expose-members?memberA2,memberB2!expose-members?memberA1,memberB1" },
4  ]
5}

You could also namespace the exposers you want like follows:

1module: {
2  loaders: [
3    { test: require.resolve("react"), loader: "expose-members?myNamespace.memberA,myNamespace.memberB" }
4  ]
5}

The require.resolve is a node.js call (unrelated to require.resolve in webpack processing -- check the node.js docs instead). require.resolve gives you the absolute path to the module ("/.../app/node_modules/react/react.js"). So the expose only applies to the react module. And it's only exposed when used in the bundle.

Documentation: Imports in ES6

Documentation: Using loaders

License

MIT (http://www.opensource.org/licenses/mit-license.php)