How to Convert Javascript from ES6 to ES5 via Babel, Shim, and Polyfill

Question

I have been trying to make my simple HTML/JS website backwards compatible (IE11 & below) by using Babel and shims/polyfills, but have been unable to do so correctly. My current site uses a few newer functions like Promise(), fetch(), document.querySelectorAll().forEach(), and () => {}.

I have tried adding es6-shim, es5-shim, fetch-polyfill, and promise-polyfill, on top of transpiling my code from es6 -> es5 via Babel. Regardless, when I load my webpage using an older browser (IE 11 or 10 for example), I get multiple errors. The errors say that () => {} does not work, and that .forEach() is not a function, which doesn't make sense since I'm using shims and Babel.

Here is the order of my JS Includes:

[... body content ...]

<script src="assets/libs/es5-shim/es5-shim.min.js" type="text/javascript"></script>
<script src="assets/libs/es6-shim/es6-shim.min.js" type="text/javascript"></script>
<script src="assets/libs/promise-polyfill/promise-polyfill.min.js" type="text/javascript"></script>
<script src="assets/libs/fetch-polyfill/fetch.umd.js" type="text/javascript"></script>

[... rest of scripts ..]

And to transpile my es6 code to es5 I did the following:

npm install -D babel-cli

npm install -D babel-preset-env

// .babelrc

{
  "presets": ["env"]
}

// package.json
...
"scripts": {
  "build": "babel src -d build",
},
...

npm run build

Two example errors: "Object doesn't support property or method forEach" (querySelectorAll().forEach()) and "Syntax error" (() => {})

@connexo Thanks to your answer I was able to convert the code, thank you! — Hybrid, Jun 29 '19 at 16:03

connexo · Accepted Answer · 2019-05-14T21:17:03.077

1

You're using an old version of Babel, switch to Babel 7 and start using @babel/preset-env. NodeList.forEach won't work in any IE and needs to be polyfilled separately because Babel polyfill doesn't polyfill any missing prototype methods.

The shortest polyfill is probably

if (!NodeList.prototype.forEach) NodeList.prototype.forEach = Array.prototype.forEach;

Also you need to configure your .babelrc so your code gets transpiled for IE. Example for Babel 7:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["ie >= 10", "last 1 version"]
        }
      }
    ]
  ]
}

P.S.: You probably don't need the shims then.

edited May 14 '19 at 21:17

answered May 14 '19 at 20:29

connexo

53,704
14
91
128

How would I switch to Babel 7? I don't seem to even have Babel installed in the first place (I checked via `npm list --depth=0` and `npm list -g --depth=0`). For reference, I followed this super short tutorial: https://medium.com/@SunnyB/how-to-convert-es6-into-es5-using-babel-1b533d31a169 – Hybrid May 14 '19 at 20:36
1

An answer on StackOverflow cannot replace your effort to read the documentation. Maybe this helps avoid a pitfall https://stackoverflow.com/questions/52092739/upgrade-to-babel-7-cannot-read-property-bindings-of-null/52092788#52092788 – connexo May 14 '19 at 20:38
I agree, but I am totally lost.. the documentation is out of control. In any case, I ran `npm install --save-dev @babel/cli @babel/core @babel/preset-env` which seemed to upgrade me to Babel 7. – Hybrid May 14 '19 at 21:13
My issue is now I get the error `Invalid Option: '>=10' is not a valid value for 'targets.ie'` When running `npm run build`. I looked here to try to find the correct syntax, but again, I feel like I am in a jungle of documentation: https://new.babeljs.io/docs/en/next/babel-preset-env.html – Hybrid May 14 '19 at 21:13
1

Updated the example `.babelrc`. Stay confident, you're almost there! – connexo May 14 '19 at 21:17

How to Convert Javascript from ES6 to ES5 via Babel, Shim, and Polyfill

1 Answers1