• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Polyfilling Promises Using Bluebird in Webpack 2

Webpack · March 8, 2017

Surprisingly, whilst determining the best way to polyfill promises in a Webpack build and using Bluebird I came across such mixed results.

A lot of the posts out there don’t mention Bluebird at all, opting for es6-promise when it has been proven Bluebird has such great performance, it’s even faster than native promises in some browsers.

A lot of the results I found were from 2015 and a couple in 2016. As you know, front-end development moves rapidly and 2015 is 100 years in front-end land.

I wanted to specifically know the best way to polyfill promises using Bluebird in Webpack 2.

The solution I am proposing might sound familiar, using imports-loader and exports-loader in combination with the Provide plugin to override native API’s.

Another solution is to conditionally load polyfills depending on what the browser supports, but that is for another time.

The approach we are taking won’t pollute the global namespace, whenever a reference to a module is found Webpack will automatically rewrite its reference to be the supplied module.

As you can see, we are polyfilling Promise, which means if you open up your application in a browser without native Promise support, typing Promise into the console will result in undefined. However, any code in your app referencing Promise will get the polyfill version.

Install the dependencies

npm install --save-dev exports-loader imports-loader
npm install --save bluebird

Configuring your Webpack

Once you have your required dependencies, inside of the plugins section of your webpack.config.js file:

plugins: [
    new webpack.ProvidePlugin({
        Promise: "imports-loader?this=>global!exports-loader?global.Promise!bluebird"
    }),
]

Now, whenever your application requests to use a Promise, you’ll get Bluebird instead. Swell.

Bonus: jQuery and whatwg-fetch polyfill

If you are using jQuery in your application, then using the ProvidePlugin you can also shim certain variables to modules.

plugins: [
    new webpack.ProvidePlugin({
        Promise: "imports-loader?this=>global!exports-loader?global.Promise!bluebird",
        fetch: "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch",
        $: "jquery",
        jQuery: "jquery"
    }),
]

Dwayne

Leave a Reply Cancel reply

3 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Kevmeister68
Kevmeister68
6 years ago

Did you really just use the word “swell” ? 😉

0
Samar
Samar
5 years ago

Is conditionally loading polyfill possible using ProvidePlugin?

0
Chris
Chris
5 years ago

I use Webpack 3 and didn’t need `exports-loaders` and `imports-loader`. I could just `npm install –save bluebird` and

“`
plugins: [
new webpack.ProvidePlugin({
Promise: “bluebird”
}),
]
“`

0

Primary Sidebar

Popular

  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • Testing Event Listeners In Jest (Without Using A Library)
  • Thoughts on the Flipper Zero
  • How To Get The Hash of A File In Node.js
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • Handling Errors with the Fetch API
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • Wild Natural Deodorant Review
  • How To Install Eufy Security Cameras Without Drilling or Using Screws

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz