Please enable JS
Logo

Using non-module format JS libraries with Webpack.

Exposing JS library functions to other modules using Webpack.
Home/Blogs/Using non-module format JS libraries with 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');
WebpackAWSAWS Cognito
0
Brian Young's picture
Brian Young

Software engineer by profession, embedded systems tinkerer, husband, father, fantasy novel devourer, wine lush, beer and cheese connoisseur

 Prev All Posts Next 

RELATED POSTS

Which PHP script is eating CPU?

June 29/admin

Transformerless A/C to D/C

January 29/admin

Part 2: Automated Drupal testing with Behat, Selenium, and Headless Firefox

March 16/admin

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.

Search form

Recent posts
Search by tag
AJAX AJAX Framework Arduino Automated Testing AWS AWS Cognito Bash Behat Circuits CiviCRM cli Continuous Integration
Categories