Support Internet Explorer using Babel Transpilation

 

In this post we will review the steps request to support IE (Internet Explorer) in a webpack based javascript project.

First, we create a babel configuration file. It should be in the same folder as the package.json file. Notice the file includes the list of browsers that you want to support.

babel.config.json:

{
  "sourceType": "unambiguous",
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": false,
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1",
          "ie": "11"
        },
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-decorators",
      {
        "decoratorsBeforeExport": true
      }
    ],
    [
      "@babel/plugin-proposal-class-properties"
    ],
    [
      "@babel/transform-runtime"
    ]
  ]
}

Next, install the babel dependencies:

NPM commands:

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

Now we need to update the webpack configuration to run babel, and to include the core-js library to fill all of the missing ES6 APIs (Only the relevant part of the file is shown here). In case you have non supported nodes_modules, replace them in the exclude section.

webpack.config.js:

module.exports = {
  entry: ['core-js/stable', './main/index.js'],

target: 'es5',
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(exclusemelib1|exclusemelib2))/,
        loader: 'babel-loader',
      },
    ],
  },

To find the ES5 non supported library, you can use the following command:

are-you-es5 CLI:

npx are-you-es5 check -a PATH_TO_YOUR_PROJECT

However, not all of the output node_modules from these commands are really used. You should really guess, which ones are really relevant. You can also run your project in IE without minification, and find out according to the errors in the console, which modules are problematic.

Final Notes

I've wrote this post after scanning many sites, and it seems that the API for handling IE support keeps changing. I hope the description in the post will be stable enough to make it until you will need it...

Some of the good resources I've used are:

• Remeez Post
• are-you-es5
• transpile node modules