Support IE 11 Using Babel and Webpack

3 min readOct 21, 2019

According to statcounter IE11 is still used by almost 4% of total internet users in United States. It used to be a tiresome job to make your web application work on IE11 specially when you are using ES6 or Typescript because of manually identifying the required polyfills and adding them in the correct order. But now thankfully because of the tools like Babel, Core-JS and BrowsersList its quite easy to convert your code in ES5 (ie: IE11 compatible javascript version).

In this article, I will be focusing on converting Typescript code to ES5 using Webpack and Babel 7 configuration. Let’s gets started.

Packages Required:

Add following in the package.json and then run npm install inside your project directory

//Add them under DevDependencies in package.json of your project"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.6.0",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.3",
"@babel/preset-typescript": "^7.6.0",
"@babel/runtime": "^7.6.3",
"babel-loader": "^8.0.6"//Add them under Dependencies in package.json of your project"core-js": "^3.3.2"

Or just simply run following commands inside your project directory

npm install --save-dev @babel/core, @babel/plugin-proposal-class-properties, @babel/plugin-proposal-decorators, @babel/plugin-transform-runtime, @babel/preset-env, @babel/preset-typescript, @babel/runtime, babel-loaderandnpm install --save core-js

Webpack.config.js:

Inside webpack.config.js file add the following rule to tell webpack to load files with .ts or .tsx extensions with babel-loader .
PS: make sure that there should not be any other rule for .ts or .tsx file extensions inside webpack.config.js.

// Add following in the rules arrays inside module object
{
    test: /\.tsx?$/,
    use: [
        {
            loader: 'babel-loader',
        }
    ],
    exclude: /node_modules/
}

Babel.config.js:

Create babel.config.js file next to package.json and webpack.config.js and put following configuration inside

module.exports = function (api) {
    api.cache(false);
    const presets = [
        [ "@babel/preset-typescript"],
        [
            "@babel/preset-env",
            {
                "corejs": { "version":3 },
                "useBuiltIns": "usage",
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1",
                    "ie": "11"
                }
            }
        ]
    ];
    const plugins = [
        ["@babel/plugin-proposal-decorators",{"decoratorsBeforeExport":true}],
        ["@babel/plugin-proposal-class-properties"],
        ["@babel/transform-runtime"]];
    return {
        presets,
        plugins
    };
};

In above configuration, babel is configured to use

1. @babel/preset-typescript to convert typescript code to javascript

2. @babel/preset-env to transform js syntax and add required pollyfills based on the target environments. @babel/preset-env internally uses:

1. BrowsersList:

To make it possible to mention list of target browsers as an object or as a string query like :

last 1 version
> 1%
maintained node versions
not dead

2. Core-JS:

To get all the required polyfills for the list of target browsers.

Load Core-JS:

Last but not the least we need to load core-js in our source code before any other code. It can be done in two ways:

Import core-js at the top of the entry point (ie: index.ts or app.ts) of your application like:

import "core-js/stable";

2. Add it as the entry point inside webpack.config.js like:

entry: {
    app: ['core-js/stable', 'entry file of your application']
}

And Tada! 🎉🎉🎉
We are all set to bundle our typescript application in ES5.