Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers

    Damon BauerDamon Bauer

    Some browsers, such as Safari < 10 & IE < 11, do not support the JavaScript Internationalization API, which react-intl depends on. In order to support these browsers, we’ll conditionally include an Intl polyfill using webpack require.ensure. This ensures only browsers that need the polyfill incur the extra load.

    reactReact
    15 - 16
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:01 Let's start this lesson out by adding an intl-polyfill. In our terminal, I'll run yarn add intl as a dependency. With it installed, we need to set up our app to conditionally include it. Inside the entry point of our app, which is in sourceindex.js, let's go to the end of our import statements.

    00:23 We'll start by writing an if statement and we'll check if the false value of window.intl. This is checking if window.intl is falsity, which means it doesn't exist in this browser. Now we'll use Webpack's require.ensure syntax, by saying require.ensure. Then we'll open that up.

    00:47 The first argument we'll pass is an array. Inside of that array, we'll pass a string of intl, and then we're going to pass string paths to the intl-polyfill's locale data for each of the locales that our app supports. That looks like this. We're going to go into the intl folder, into locale data, into the JSON p folder. We're going to grab en.js. We'll grab es.js and fr.js.

    01:19 The second argument to the require.ensure method is an anonymous function. We'll pass require into that function. Now we'll actually use the require syntax to import all of those files. What this is doing is saying, if window.intl doesn't exist, we're going to make sure that the intl-polyfill is in this project and all of these locale files exist.

    01:55 Once all of that is true, we're going to add all of those to the require stack in this file, which means that the polyfill will be loaded, and all these locale data files will be, as well.

    02:07 The next thing we need to do is wrap our business logic in a function. Let's add a function called runApp. We'll remove all of this code inside of that function. Of course, now we need to execute that runApp function. At the end of the if statement, once our require.ensure method runs, we'll instantiate runApp.

    02:34 The reason we do this is so that when we run add locale data here, browsers that don't support window.intl will have all of the necessary logic, because we conditionally required it using require.ensure. We're not penalizing browsers that do understand window.intl by not adding all these extra polyfill files.

    02:57 One final thing we'll need to do is, if browsers don't need this polyfill information because they support intl, we'll add an else statement and just execute runApp immediately.

    Discuss

    Discuss