Я работаю с приложением с интерфейсом, созданным с использованием старых методов (jQuery и прямое манипулирование DOM), и я хотел бы перенести его на ES8 и React. Поскольку это довольно большое и сложное приложение, этот шаг должен быть постепенным, а это означает, что и устаревший код, и код React какое-то время должны будут жить бок о бок.
В устаревшем коде используется домашний «загрузчик модулей», который должен продолжать работать. Я рассматривал использование Webpack и его опции конфигурации libraryTarget: 'var', которая в основном выводит каждую точку входа в глобальную переменную. Это работает, но производительность (время сборки) Webpack недостаточно высока, поэтому я искал вместо этого ParcelJS.
Возможно ли получить что-то подобное Webpack libraryTarget: 'var' с ParcelJS? По сути, в «устаревшем HTML-файле» (который часто генерируется сервером и может содержать данные, которые мне нужно передать модулям ES8), я хотел бы иметь возможность делать что-то в следующих строках:
<script src = "dist/js/ABundle.js"></script> <!-- Bundle created by ParceJS -->
<script>
var data = {/* JSON generated by server */};
var ABundle = require('ABundle'); // Export defined in ABundle.js.
ABundle.render(data); // Function exported in ABundle.
</script>
Обратите внимание, что я не могу передавать свои файлы HTML в качестве точек входа в ParcelJS, поскольку они содержат ссылки на файлы Javascript с использованием загрузчика модуля homebrew, который не будет хорошо работать с ParcelJS. Я просто хочу передать модули ES8 в качестве точек входа в ParcelJS и использовать их вместе с загрузчиком модулей домашнего пивоварения.
Обновлено: Уточнено, что устаревший HTML фактически генерируется сервером.
Я действительно портировал довольно большую часть приложения, используя веб-пакет и подход libraryTarget: 'var'. Это работает нормально, но сборка веб-пакета занимает вечность (т.е.> 30 секунд), поэтому я хотел бы переключиться на Parcel JS (который создает приложение примерно за 1,5 секунды, как показывают начальные тесты). Таким образом, фактический код и перенос - это уже «решенная проблема», мне просто нужно найти способ использовать код в комплекте с использованием Parcel JS.
Однажды у меня был проект webpack, компиляция которого занимала 10+ секунд, но причина в том, что caching был отключен. После включения веб-пакет скомпилировался всего за 1 секунду.
Вы когда-нибудь получали на это ответ? Мне нужно сделать то же самое. Один из вариантов - использовать SystemJS для импорта модуля. Он возвращает корневой модуль, который вы создали с помощью Parcel - я понятия не имею, как он это понимает. Однако я бы предпочел не иметь этой дополнительной библиотеки только для одного вызова. Вы также можете сделать так, чтобы модули рекламировали себя, добавив их в глобальный объект, например window.myModules. Это дешево, но немного странно.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Похоже, что для того, чтобы ваше гибридное приложение заработало, потребуется много усилий, и даже тогда мне интересно, как вы совместите React с прямым манипулированием DOM ... Другими словами, не будет ли это более ценно, если вы просто начнете портировать Реагировать напрямую? Даже если на это уйдет больше времени. Просто думаю здесь вслух.