Использование Babel/Webpack только для транспилинга/полифилинга

avatar
honzaik
1 июля 2021 в 18:28
53
1
1

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

Но я хочу писать новые сценарии с использованием современного Javascript (например, Promises и Fetch), но при этом иметь возможность поддерживать старые браузеры, такие как IE11.

Я настроил webpack и babel таким образом, чтобы он получал файлы JavaScript с несколькими входами, и для каждого из них выполнялась классическая транспиляция/полифиллинг с использованием @babel/preset-env и corejs.

Это работает и заполняет каждый скрипт на основе целевой конфигурации Babel, но создает одну проблему. Он инкапсулирует глобальные переменные/функции в скрипт, поэтому они недоступны из других скриптов, которые на них ссылаются (да, старый javascript). Есть ли способ отключить эти структурные модификации?

Также я знаю, что мог бы использовать для этого только Babel без Webpack, но проблема в том, что когда я пытаюсь выполнить полифилл, например. Fetch Мне нужно использовать https://github.com/github/fetch, который нельзя просто использовать с Babel afaik.

Любая помощь приветствуется.

Источник
Matt
1 июля 2021 в 18:30
0

death-to-ie11.com

Ответы (1)

avatar
Marcin Wosinek
1 июля 2021 в 19:50
0

Я думаю, что ваш рефакторинг неизбежно модернизирует код, и если вы не будете осторожны, однажды вы можете в конечном итоге объединить все с помощью веб-пакета;)

Установка, которую вы описываете, была достигнута с помощью:

module.exports = {
  entry: {
    messages: "./src/messages",
    "hello-world": "./src/hello-world",
  },
  output: {
    library: {
      type: "global",
    },
    filename: "[name].js",
  },
};

каждый экспорт из каждого файла помещается непосредственно в <92780393333878> — если вы загружаете файлы в правильном порядке, вы можете поддерживать невидимые зависимости в кодовой базе.

К этой настройке вы можете добавить загрузчик babel с пресетами, как вы указали в своем вопросе. Кроме того, вы можете начать выполнять явный импорт в разные файлы — даже если функция X доступна в глобальном масштабе, вы можете перенести некоторые места, чтобы импортировать/требовать ее явным образом.

Если вы хотите сами поиграть с моим кодом, вы можете найти его здесь: https://github.com/marcin-wosinek/webpack-legacy/

и вот пример в действии: https://marcin-wosinek.github.io/webpack-legacy/

honzaik
2 июля 2021 в 15:18
0

благодарю вас. это, к сожалению, не работает, как мне бы хотелось, поскольку он ожидает экспорта в файл javascript, что на самом деле невозможно из-за количества рассматриваемого кода. да я знаю, это нужно переделать, надеюсь это временное решение