Как конвертировать Javascript из ES6 в ES5 через Babel, Shim и Polyfill - PullRequest
Новая
       62

Как конвертировать Javascript из ES6 в ES5 через Babel, Shim и Polyfill

0 голосов
/ 14 мая 2019

Я пытался сделать свой простой HTML / JS-сайт обратно совместимым (IE11 и ниже) с помощью Babel и shims / polyfills, но не смог сделать это правильно. Мой текущий сайт использует несколько новых функций, таких как Promise(), fetch(), document.querySelectorAll().forEach() и () => {}.

Я попытался добавить es6-shim , es5-shim , fetch-polyfill и обещание-polyfill , наверху передачи моего кода из es6 -> es5 через Babel. Независимо от того, когда я загружаю свою веб-страницу с помощью более старого браузера (например, IE 11 или 10), я получаю несколько ошибок. В ошибках говорится, что () => {} не работает, и что .forEach() не является функцией, что не имеет смысла, так как я использую прокладки и Вавилон.

Вот заказ моего JS включает в себя: 

[... 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 ..]

И для переноса моего кода es6 в es5 я сделал следующее:

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

Два примера ошибок: «Объект не поддерживает свойство или метод forEach» (querySelectorAll().forEach()) и «Синтаксическая ошибка» (() => {})

1 Ответ

1 голос
/ 14 мая 2019

Вы используете старую версию Babel, переключитесь на Babel 7 и начните использовать @babel/preset-env.NodeList.forEach не будет работать ни в одном IE, и его необходимо заполнять отдельно, потому что Polyfill Babel не заполняет пропущенные методы-прототипы.

Возможно, самый короткий polyfill 

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

необходимо настроить .babelrc, чтобы ваш код передавался для IE.Пример для Вавилона 7: 

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

PS: Возможно, тогда вам не нужны прокладки.

...