Как подключить сторонний polyfill (classlist-polyfill) в Babel?

Question

[MisterTw1ster]

файл script.js обрабатывается с помощью запуска Babel командой npm run build

вот код package.json

{
  "name": "video-order",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": "> 0.25%, not dead"
        }
      ]
    ]
  },
  "scripts": {
    "build": "babel script -d dist"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/phillfeel/app_for_video-order.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/phillfeel/app_for_video-order/issues"
  },
  "homepage": "https://github.com/phillfeel/app_for_video-order#readme",
  "devDependencies": {
    "@babel/cli": "^7.11.6",
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-es2015": "^7.0.0-beta.53"
  },
  "dependencies": {
    "classlist-polyfill": "^1.2.0"
  }
}

Подскажите пожалуйста куда добавить зависимость с "classlist-polyfill" чтобы Babel тоже задействовал этот пакет.

Answer 1

[ned4ded]

Во первых, classlist-polyfill - не бабель-плагин, сл-но его нельзя добавить в бабель.

Во вторых, classlist polifill - это полифил для dom браузера, а не для js (разница в том, что dom - это апи, с которым можно взаимодействовать по средствам запуска js в браузерном окружении). Бабель полифилит js, но не dom.

В третьих, чтобы dom-полифил заработал в браузере, его нужно в этом браузере запустить, для этого его нужно импортировать перед тем скриптом, который будет этим полифилом пользоваться. Бабель - это транспайлер, он не занимается конкатенацией js-модулей в один файл, для этого нужно использовать вебпак, роллап или еще какой-либо бандлер.

Подведем итог, тебе нужно сначала настроить вебпак, который будет собирать модули js в один файл; потом импортировать в script.js полифил для браузера; потом нужно прогнать script.js через бабель, чтобы получить заполифиленный js (этим занимается, например, вебпак, он собирает скрипты в один или несколько файлов, прогоняет файлы через транспайлер).

Comments

[MisterTw1ster]

Спасибо за развернутый ответ, вроде начинаю понимать. Из-за чего все это затеял - на IE11 и edge вылетают ошибки с classList (add, remove, toggle), везде советуют classlist-polyfill. Буду очень, рад если подскажете какое-то более простое решение) Проект по сути легковесный и нет смысла в каком то бандлере.

[ned4ded]

MisterTw1ster, первый вариант (достаточно прямолинейный) - скопировать исходник этого проекта руками в начало файла, второй вариант - подключить исходник classlist-polyfill как отдельный js-файл перед файлом script.js в штмл документе

[MisterTw1ster]

ned4ded, спасибо! скопировал просто в файл, ошибка исчезла. Потом занесу все полифиллы в отдельный файл)

[ned4ded]

MisterTw1ster, не за что. Отметь ответом, если не сложно