Please enable JS

Using non-module format JS libraries with Webpack.

Exposing JS library functions to other modules using Webpack.
June 20/Brian Young/Software

Exposing library variables publicly

I was trying to get amazon-cognito-identity-js to work with Webpack. It depends on the jsbn and jsbn2 libraries that were designed to be exposed globally. This doesn't work with Webpack because Webpack locally scopes everything it "requires".

Solution, use exports-loader and imports-loader

Webpack useses a series of loaders whenever a file is being "required". Using the exports-loader, we can have Webpack append exports["MyVariable"] = (myVariable); to the end of a file it's appending to our compiled output.

Read more about Webpack's options for shimming modules.

Install the new loaders

  1. npm install imports-loader
  2. npm install exports-loader

Tell Webpack what needs exporting and importing

In your webpack.config.js file, set the following loaders settings.

  1. /* ...
  2. Your webpack.config.js specific settings.
  3. .... */
  4.  
  5. module.exports = {
  6. /* ... */
  7. module: {
  8. loaders: [
  9. {
  10. test: /jsbn\.js$/,
  11. loaders: [
  12. 'exports?BigInteger=BigInteger',
  13. 'exports?IntAt=intAt',
  14. 'exports?Nbv=nbv',
  15. 'exports?Montgomery=Montgomery',
  16. 'exports?Nbi=nbi',
  17. 'exports?Nbits=nbits'
  18. ]
  19. },
  20. {
  21. test: /jsbn2\.js$/,
  22. loaders: [
  23. 'imports?BigInteger=>JsbnWrapper.BigInteger',
  24. 'imports?nbi=>JsbnWrapper.Nbi',
  25. 'imports?intAt=>JsbnWrapper.IntAt',
  26. 'imports?nbv=>JsbnWrapper.Nbv',
  27. 'imports?Montgomery=>JsbnWrapper.Montgomery',
  28. 'imports?nbits=>JsbnWrapper.Nbits'
  29. ]
  30. },
  31. {
  32. test: /amazon-cognito-identity\.min\.js$/,
  33. loaders: [
  34. 'imports?BigInteger=>JsbnWrapper.BigInteger'
  35. ]
  36. }
  37. ]
  38. }
  39. };

Use the newly "exports" settings.

In your JS file that needs to leverage the library, set the results of "require" to be global.

  1. // In your main entry point js file.
  2.  
  3. // webpack.config.js is configured to export a series of variables that we'll also import into jsbn2 and the AWS SDK.
  4. JsbnWrapper = require("./js/lib/utils/jsbn.js");
  5. // Webpack.config.js will import variables into this file that were exported from jsbn.js.
  6. require('./js/lib/utils/jsbn2.js');
  7. // Set "sjcl" to the global scope.
  8. sjcl = require('sjcl');
  9. require('./node_modules/amazon-cognito-identity-js/dist/aws-cognito-sdk.min.js');
  10. require('./node_modules/amazon-cognito-identity-js/dist/amazon-cognito-identity.min.js');


RELATED POSTS


Comments/ 0


LEAVE A COMMENT

(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
(If you're a human, don't change the following field)
Your first name.
But why?

My random thoughts and documentation on the various hardware and software projects that occupy my day-to-day. My only hope is that other people can benefit from my notes.

Recent posts
Categories