Я изо всех сил пытаюсь найти «быстрый» способ перевода некоторых устаревших файлов javascript из сборочного пакета в веб-пакет.Я (думаю, мне) нужно найти способ связать набор файлов javascript, просто объединив их и не упаковав их в пакет jsonp.
Наша платформа построена в Symfony с использованием шаблонов веток, и мы 'у нас есть большинство наших старых файлов javascript, загруженных с использованием ассемблера (он просто объединяет и минимизирует), у нас есть новые файлы javascript / typcript, связанные с веб-пакетом.
Естественно, я хочу удалить все ассемблерные зависимости и использовать веб-пакетсвязать старый javascript.Однако из-за способа, которым webpack производит пакеты, он упакован в jsonp, и любые функции / переменные, определенные в этих файлах javascript, недоступны в глобальной области видимости.
В сборочном мире наши файлы ветокусеяно этим:
{%- javascripts
'%kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-transition.js'
'@MyBundle/Resources/js/legacy-1.js'
'@MyBundle/Resources/js/legacy-2.js'
filter="?uglifyjs2"
output="js/compiled/page-one.js" %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
, который объединяет и минимизирует их всех.Я хотел бы заменить это аналогичной версией веб-пакета.
Я определил некоторые подходы, но я не уверен, что какой-либо из них является лучшим.
- Использование
script-loader, чтобы заставить скрипты загружаться в глобальной области видимости - поскольку script-loader использует eval, который отключен с помощью CSP, об этом не может быть и речи - Переписать каждый файл javascript, открывая элементы в окне.- Вероятно, это будет самый простой вариант, но мне действительно не нравится эта идея, и она идет вразрез с лучшими практиками.
- Перепишите каждый файл javascript, экспортируйте элементы, а затем используйте
expose-loader для загрузки файлов., затем просмотрите все файлы веток и обновите ссылки на элементы с глобальным пространством имен.Это заняло бы много времени, и я бы предпочел не делать этого, если это вообще возможно
Я подумал, что мог бы просто настроить queryParameter и file-loader для загрузки каждого из них, ноЯ бы нуждался в теге script для каждого ресурса и потерял бы из-за природы комплектации.(Я использую пакет веб-пакета Symfony для создания списка entries для веб-пакета и предоставляю функции веток для загрузки записей во время выполнения из cdn)
<script src='{{ webpack_asset('%kernel.root_dir%/../vendor/twbs/bootstrap/js/bootstrap-transition.js?asFile') }}"></script>
<script src='{{ webpack_asset('@MyBundle/Resources/js/legacy-1.js?asFile') }}"></script>
<script src='{{ webpack_asset('@MyBundle/Resources/js/legacy-2.js?asFile') }}"></script>
Поэтому я ищу способ объединитьфайлы вместе.Создание отдельного входного файла и загрузка его в виде файла не будут достаточно хорошими, поскольку require s / import s не будут решены.
Я понимаю, что webpack-concat-plugin потребует от меняопределить все различные файлы для конкатенации в конфигурации веб-пакета, что на самом деле невозможно.
Я не сталкивался с загрузчиком, который заменял бы import '@MyBundle/Resources/js/legacy-2.js' содержимым этого jsфайл - но, может быть, я что-то упускаю.
Интересно, не стоит ли после всех этих попыток найти простое решение больше, чем попытка переписать устаревший javascript для использования модулей ...
Я нашел следующие ответы, но они мне не очень помогли: