Как импортировать пакеты, сгенерированные Parcel JS, в "устаревшее" приложение?

Я работаю с приложением с интерфейсом, созданным с использованием старых методов (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 фактически генерируется сервером.

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

Kokodoko 18.06.2018 10:26

Я действительно портировал довольно большую часть приложения, используя веб-пакет и подход libraryTarget: 'var'. Это работает нормально, но сборка веб-пакета занимает вечность (т.е.> 30 секунд), поэтому я хотел бы переключиться на Parcel JS (который создает приложение примерно за 1,5 секунды, как показывают начальные тесты). Таким образом, фактический код и перенос - это уже «решенная проблема», мне просто нужно найти способ использовать код в комплекте с использованием Parcel JS.

David Nordvall 18.06.2018 11:58

Однажды у меня был проект webpack, компиляция которого занимала 10+ секунд, но причина в том, что caching был отключен. После включения веб-пакет скомпилировался всего за 1 секунду.

Kokodoko 18.06.2018 23:55

Вы когда-нибудь получали на это ответ? Мне нужно сделать то же самое. Один из вариантов - использовать SystemJS для импорта модуля. Он возвращает корневой модуль, который вы создали с помощью Parcel - я понятия не имею, как он это понимает. Однако я бы предпочел не иметь этой дополнительной библиотеки только для одного вызова. Вы также можете сделать так, чтобы модули рекламировали себя, добавив их в глобальный объект, например window.myModules. Это дешево, но немного странно.

Jay G 19.06.2020 18:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
327
0

Другие вопросы по теме