The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Polyfill Promises for Webpack 2

Polyfill Promises for Webpack 2

1:59
If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has support for the ES6 `Promise` API. This means that if you are required to support an old browser, you need to provide a polyfill. Polyfilling is relatively trivial to do with Webpack, but because Webpack itself depends on this particular polyfill, you have to come up with another way of doing so. In this lesson, we'll see how we can use the [polyfill.io](https://cdn.polyfill.io/v2/docs/) service to automatically polyfill this API (and others) for us.
Watch this lesson now
Avatar
egghead.io

If you're going to use code splitting with Webpack 2, you'll need to make sure the browser has support for the ES6 Promise API. This means that if you are required to support an old browser, you need to provide a polyfill. Polyfilling is relatively trivial to do with Webpack, but because Webpack itself depends on this particular polyfill, you have to come up with another way of doing so. In this lesson, we'll see how we can use the polyfill.io service to automatically polyfill this API (and others) for us.

Avatar
William Horton

Can Polyfill.io completely replace babel-polyfill? I can definitely see the advantages of Polyfill.io only polyfilling what the browser doesn't supply natively. Are there any disadvantages?

In reply to egghead.io
Avatar
Kent C.

Your main disadvantage will be that Polyfill.io doesn't have a Service Level Agreement or any Terms of Service. So if the service goes down then you could be in trouble. I asked them about this, you can read about that here: https://github.com/Financial-Times/polyfill-service/issues/663

Other than that though, I would expect that this would perform better for most of your users than bundling polyfills that the modern browsers don't need.

In reply to William Horton
Avatar
Lingke

Hi there - not to hamper on details/wording (just want to make sure I understand). Your note mentions "Polyfilling is relatively trivial to do with Webpack..." - installing the polyfill has nothing to do with webpack - it's just adding a script tag right? Polyfilling promise is only relevant to webpack in that we will need it later on for code splitting in older browers.

In reply to egghead.io
Avatar
Yuri Kilian

Ok. Great lesson but how can I accomplish promise polyfill using webpack. Not including a script tag on page's footer.

In reply to egghead.io
Avatar
Kent C.

As mentioned in the lesson, Webpack's runtime now depends on promises, so you can't really use Webpack to polyfill promises AFAIK.

In reply to Yuri Kilian
Avatar
Yuri Kilian

Thank you for reply.
Here's my situation: I have a large application modularized by requirejs in ES5 and I want upgrade that to ES6 but continue using angular js 1.x. My focus is on provide System.import for modularization but I cannot find out how to archieve Promise polyfill. Remembering that I cannot use CDN based scripts because it's a private project. Do you have some idea to deal with it?

Thx

In reply to Kent C.
Avatar
Kent C.

Sure, you can manually download a promise polyfill (like this one) and include a script tag that points to that file on your server.

An important thing to note is that the only part of webpack 2 that requires the promise polyfill is the code splitting stuff. If you're not using that feature, you wont need the promise polyfill. Good luck!

In reply to Yuri Kilian
Avatar
Yuri Kilian

Haha it's exactly this feature that I want! Thank you!

In reply to Kent C.
Avatar
Yuri Kilian

More one thing. Now it works! But there's a possibility to use Array.forEach with System.import?

See the code below:

import angular from 'angular';
let paths = ['../app/components/app.components'
,'../app/shared/app.shared'];

let promises = [];
paths.forEach((path)=> promises.push(System.import(path));

Promise.all(promises).then(modules => {
let dependencies = [];
modules.forEach(module => {
dependencies.push(module.default.name);
})
angular.module("app", dependencies);
angular.bootstrap(document, ['app']);
}).catch(error => {
console.error(error.message)
});

I can see this like a Dynamic module import function but, when I run a build, the webpack doesn't recognize the paths array as modules using paths.forEach. Do you know if this feature is allowed in ES6?
Thank you.

In reply to Kent C.
Avatar
Kent C.

I think that it's technically allowed with the System.import spec, but I'm assuming webpack is not tracking it properly to know to make a split chunk for each of those. You could file an issue on Webpack.

Honestly though, I'd just hardcode it myself...

In reply to Yuri Kilian
Avatar
Yuri Kilian

Thank you!

In reply to Kent C.
Avatar
Dean

Really awesome series.
I have a question ---

I 'might' need code splitting, BUT, my application only cares about IE11+, and more recent versions of the other browsers. Plus, I am using babel etc... so, is the polyfill still required for code splitting? After re-watching the video, it seems that webpack needs it no matter what -- but why wouldn't webpack include one of its own as it seems rather dangerous to hinge a build process on a third party script - Your thoughts?

Avatar
Kent C.

Webpack 2 just needs Promises. If it's available in the browser, you don't need the Promise polyfill. Unfortunately IE11 does not support promises. This is why the polyfill service is great. Because the promise polyfill is only sent to browsers that don't support promises natively.

You might argue that Webpack's runtime should include promises. But I would hate to send that polyfill to browsers that support it natively, especially if my app is only used by modern browsers.

In reply to Dean
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?