Бандлер это что означает
Parcel — мой любимый сборщик проектов
Сегодня мы поговорим о сборщиках проектов (о бандлерах), об инструментах, которые облегчают жизнь разработчиков. Суть работы бандлеров заключается в том, что они берут JavaScript-код, содержащийся во множестве файлов, и упаковывают его в один или несколько файлов, определённым образом упорядочивая и подготавливая к работе в браузерах. Более того, благодаря различным подключаемым модулям (плагинам) и загрузчикам, код можно минифицировать, можно упаковывать, помимо кода, и другие ресурсы (вроде CSS-файлов и изображений). Бандлеры позволяют использовать препроцессоры, умеют разделять код на фрагменты, загружающиеся тогда, когда в них возникнет необходимость. Но их возможности этим не ограничиваются. Фактически, речь идёт о том, что они помогают организовывать процесс разработки.
Существует множество бандлеров. Например — Browserify и webpack. Хотя эти сборщики проектов представляют собой замечательные инструменты, лично я обнаружил, что их сложно настраивать. С чего начать настройку? Этот вопрос особенно актуален для новичков, для тех, кого может немного испугать такое понятие, как «конфигурационный файл».
Именно поэтому я, как правило, пользуюсь сборщиком проектов Parcel. Я наткнулся на этот бандлер случайно, когда смотрел одно учебное видео на YouTube. Там давались советы по ускорению разработки. Показанная в этом видео рабочая среда была сильно завязана на Parcel. После этого я решил, что и мне стоит попробовать этот бандлер.
Особенности Parcel
Мне в Parcel больше всего нравится то, что он совершенно не требует настройки. Именно так: конфигурировать его не нужно. В этом плане Parcel выигрывает у webpack, где настройки могут быть разбросаны по нескольким файлам и представлять собой целые «простыни» кода. Разработчик, настраивая webpack, возможно, взял что-то из конфигурационных файлов других программистов. Возможно, что настройки попросту целиком скопированы из других проектов. Ясно, что сложность конфигурации зависит от разработчика, но даже при настройке webpack для небольшого проекта требуется задействовать некий набор плагинов и установить определённые опции.
Именно поэтому использование Parcel и кажется мне удачным ходом. Например, если разработчик планирует стилизовать свой проект с помощью SCSS или LESS, то он может, без лишних движений, просто написать соответствующий код. Хочется использовать самые свежие возможности JavaScript? Если так — можно, ни о чём не задумываясь, писать код с использованием этих возможностей. Нужен сервер для разработки? У того, кто пользуется Parcel, есть такой сервер. На самом деле, тут мы лишь едва коснулись верхушки айсберга обширных возможностей Parcel.
Parcel позволяет программисту, не тратя времени ни на что второстепенное, просто взять и начать работу над проектом. В этом лежит главнейшее преимущество использования его в качестве бандлера. Parcel, кроме того, обрабатывает файлы и собирает проекты очень быстро, используя возможности многоядерных процессоров, в то время как другие бандлеры, включая webpack, выполняя сложные и ресурсоёмкие трансформации кода, работают медленнее.
Сфера использования Parcel
Parcel, как и любой другой инструмент, это не некое универсальное средство, такое, которое одинаково хорошо применимо всегда и везде. Но существуют ситуации, в которых Parcel показывает себя особенно удачно.
Я уже говорил о том, насколько быстро Parcel позволяет выйти на функционирующий проект. Благодаря этому он идеально подходит для работы в условиях жёстких временных рамок и для создания прототипов. Речь идёт о ситуациях, когда время дорого, и когда целью разработчиков является как можно более быстрое создание работающего приложения.
Это не значит, что Parcel не подходит для сложных приложений, или для проектов, в работе над которыми участвуют большие команды программистов. Parcel хорошо показывает себя и в таких условиях. Однако я понял, что крупномасштабным проектам может пойти на пользу ручная настройка рабочих процессов.
Сравнивать бандлер, который не нуждается в настройках, с бандлером, который требуется настраивать, это как сравнивать автомобили с автоматической и с механической коробкой передач. Иногда водителю может понадобиться контролировать больше деталей, а иногда — меньше.
Я работал над одним многостраничным сайтом, в недрах которого имелось много JavaScript-кода. Parcel отлично показал себя в этом проекте. Он дал мне сервер, он компилировал Sass в CSS, добавлял в код, при необходимости, префиксы производителей браузеров, позволял, без каких-либо настроек, использовать в JavaScript-файлах команды экспорта и импорта. Всё это значительно облегчило мне работу над проектом.
Создание простого сайта с использованием Parcel
Давайте устроим Parcel тест-драйв. Это позволит нам увидеть то, что создать что-то с помощью этого бандлера сравнительно просто. Вот страничка, над которой мы будем работать.
Страница экспериментального проекта
Мы собираемся создать простой сайт, в котором будет использоваться Sass и немного JavaScript. Мы будем выводить на страницу сайта сведения о текущем дне недели и случайное изображение, загруженное с Unsplash Source.
▍Базовая структура проекта
Добавим в файл index.html немного шаблонного кода и разметку, на которой будет основан функционал проекта:
Вы могли заметить, что тут я загружаю веб-шрифт (Lato) из Google Fonts. Использование загружаемых шрифтов — это дело добровольное. Здесь стоит обратить внимание на подключение CSS и JavaScript-файлов, и на HTML-код тела документа, в котором предусмотрено место для вывода сведений о дне недели, и место для вывода случайного изображения из Unsplash. Собственно говоря, на этом работа над базовой структурой проекта завершена.
▍Чудо быстрой подготовки Parcel к работе
Теперь, прежде чем перейти к стилизации и к написанию скриптов, попробуем запустить наш проект с помощью Parcel. В установке Parcel ничего необычного нет:
Теперь инициализируем проект с помощью npm или yarn, что приведёт к созданию файла package.json :
Вот и всё! Больше никаких настроек выполнять не нужно. Всё, что нам осталось сделать — это сообщить Parcel о том, какой файл является входной точкой проекта. Это позволит бандлеру узнать о том, что его серверу нужно отдавать клиентам.
В нашем случае таким файлом будет index.html :
В консоли, после успешного запуска сервера, будет выведено примерно следующее:
Сервер Parcel поддерживает «горячую» перезагрузку. Бандлер выполняет пересборку приложения каждый раз, когда сохраняются изменения, внесённые в файлы проекта.
Вернёмся в папку проекта. Здесь можно увидеть новые папки и файлы, созданные бандлером.
Новые папки и файлы, созданные бандлером
▍Продолжение работы над проектом
Перейдём в файл style.scss и ознакомимся с тем, как Parcel обрабатывает Sass-код. Я создал тут несколько переменных, используемых для хранения цветов и ширины контейнера, в котором размещается содержимое страницы:
Теперь, в тот же файл, добавим описания стилей. Тут вы можете создать то, что вам нравится. Я, например, поступил так:
Как только этот файл будет сохранён — Parcel примется за работу, всё скомпилирует, и перезагрузит страницу в браузере. Нам ничего, кроме сохранения файла, делать не требуется. Parcel, по умолчанию, наблюдает за изменениями файлов.
Вот как будет выглядеть страница после стилизации.
Осталось лишь вывести здесь название текущего дня недели. Мы, в ходе решения этой задачи, будем использовать команды импорта и экспорта. Это позволит проверить возможности Parcel по работе с современными механизмами JavaScript.
Создадим файл today.js и экспортируем из него функцию, которая возвращает, пользуясь массивом с названиями дней недели, название текущего дня:
Обратите внимание на то, что функция getDay первым днём недели считает воскресенье (Sunday).
Parcel, без дополнительных настроек, поддерживает синтаксис ES6-модулей, поэтому мы можем пользоваться JS-файлах командами импорта и экспорта.
После сохранения файла проект будет пересобран, его страница в браузере изменится.
▍Сборка проекта для продакшна
Мы создали приложение, а теперь мы хотим куда-нибудь его выложить. Это может быть наш собственный сервер, или что-то вроде Surge или Now, позволяющее максимально просто публиковать веб-проекты. При этом нам нужно, чтобы код проекта был бы скомпилирован и минифицирован.
Для приведения проекта в вид, пригодный для публикации, нам достаточно единственной команды:
После запуска этой команды в консоль попадёт нечто, подобное тому, что показано на следующем рисунке.
Теперь в нашем распоряжении оказываются ресурсы приложения, готовые к развёртыванию его в продакшне. Здесь можно почитать подробности о том, как Parcel собирает продакшн-версии проектов, и найти некоторые советы, которые позволят повысить эффективность работы с этим бандлером.
Итоги
Я говорил это уже несколько раз, но повторюсь снова: Parcel — это отличный инструмент. Он позволяет собирать проекты, компилировать код, даёт в распоряжение программиста сервер разработки, выполняет предварительную обработку и пост-обработку ресурсов, минифицирует код. И этим его способности не ограничиваются. Здесь мы рассмотрели, вероятно, предельно простой пример, но я надеюсь, что он позволил вам ощутить возможности Parcel и помог узнать о том, как использовать этот бандлер в ваших проектах.
Уважаемые читатели! Каким бандлером вы пользуетесь?
Узнайте бандлер получше
Бандлер оказался замечательным средством установки и отслеживания джемов, которое так нужно каждому руби проекту настолько, что почти каждый проект использует его. Однако, несмотря на его повсеместность, большинство пользователей не знают о встроенных средствах и помощниках бандлера. В попытке повысить осведомленность (и производительность Руби разработчиков), я собираюсь рассказать вам о них.
Install, update, и outdated
Вы наверное уже знаете это, но я обобщу это для новичков. Запустите bundle installдля установки пакетов, необходимых для вашего проекта. Что если вы только что запустили git pull и там появились новые джемы? bundle install. Если вы только что добавили новые джемы или поменяли версии джемов в Gemfile? bundle install. Казалось бы более логичным будет запустить bundle update, но это не только установит джемы — оно также попробует обновить каждый джем в вашем пакете. Обычно это означает катастрофу, если, конечно, вы на самом деле это планировали.
Команду update следует использовать тогда, когда ваши используемые джемы обновились, и вы хотите, чтобы ваш пакет имел самую новую версию, которую позволит запустить ваш Gemfile. Запустите bundle outdated, чтобы распечатать список джемов, которые можно обновить. Если вы хотите обновить определённый джем, запустите bundle update GEM или bundle update, чтобы обновить всё. После обновления проследите за тем, чтобы пройти все тесты прежде чем коммитить ваш новый Gemfile.lock!
Show и open
Большинство знают о bundle show, который распечатывает полный путь к местонахождению установки джема (наверное, потому что эта команда запускается в случае успешной установки). Однако намного полезнее является команда bundle open, которая сразу откроет джем в вашем редакторе. Вот минималистичное демо:
Это всё, что вам нужно для того, чтобы открыть rack в вашем редакторе. Возможность открывать джемы без необходимости их искать может быть замечательным способом отладки. Это позволяет вставлять операторы для печати или отладки в считанные секунды. Если вы меняете свои джемы, не забудьте после этого их ресетнуть! В будущем для этого будет создана pristine команда, но пока что запускайте bundle exec gem pristine чтобы восстановить джемы, которые вы редактировали.
Поиск
Независимо от того, используете ли вы grep, ack или ag, стало очень просто настроить shell функцию, которая позволит вам производить поиск по пакету с помощью всего пары символов. Вот мои:
С этой функцией искать стало ещё проще и быстрее:
Binstubs
Одна из самых надоедающих вещей при использовании бандлера — это то, что вы (наверное) должны запускать bundle exec whatever каждый раз, когда хотите запустить любую команду. Самым простым способом обойти это является установка Bundler binstubs. Запустив bundle binstubs GEM, вы можете генерировать стабы (stubs) в папке bin/. Эти стабы будут подгружать ваш пакет и правильную версию джема, прежде чем запустить команду. Вот пример настройки binstub для rspec.
Используйте binstubs для часто запускаемых команд или для команд, которые вы, возможно, будете запускать через cronjob. Учитывая, что binstubs не должны подгружать много кода, они будут работать очень быстро. Rails 4 приспособил binstubs и выйдет с bin/rails и bin/rake. Они будут настроены, чтобы всегда запускаться для конкретного приложения.
Создание Gemfile
Я видел множество жалоб, что это очень неудобно каждый раз набирать source ‘https://rubygems.org/’ создавая новый Gemfile. К счастью, бандлер будет это делать за вас! Когда вы начинаете новый проект, вы можете создать новый Gemfile, используя Rubygems.org как источник, запустив лишь одну команду:
Теперь вы готовы добавлять джемы и устанавливать в своё удовольствие!
Локальные Git джемы
Многие спрашивали, как можно использовать бандлер для того, чтобы изменять и коммитить в джем в своём Gemfile. Благодаря усилиям José Valim, бандлер 1.2 позволяет делать это крайне элегантно. С помощью одной настройки вы можете загрузить свой собственный git клон в разработку, но при развёртывании в производство будет проверено, каким последним коммитом вы пользовались.
Вот как настроить локальную git копию rack:
После того, как всё настроено, вы можете как изменять код, который ваше приложение будет использовать, так и коммитить в тот репозиторий так часто, как вам захочется.
Версии Ruby
Еще одна особенность бандлера 1.2 — запросы версии руби. Если вы знаете, что ваше приложение работает только с одной версией руби, вы можете запросить эту версию. Просто добавьте одну строку в свой Gemfile, указывая номер версии как string.
Теперь бандлер вызовет исключение каждый раз, когда вы попытаетесь запустить ваше приложение на другой версии руби. Вам не нужно больше беспокоиться о том, что вы случайно будете использовать неверную версию при разработке!
Схема зависимости
Бандлер использует Gemfile, чтобы создать так называемую схему зависимостей, где показано множество джемов и их зависимости друг от друга. Иногда это очень интересно и удобно видеть графическую схему зависимостей, и это то, что делает команда bundle viz. Вам потребуется установить джемы GraphViz и ruby-graphviz.
После этого вы получите красивый обзор ваших зависимостей. Вот схема Gemfile, который содержит только один Rails джем.
IRB в вашем пакете
Перед большим финалом у меня есть для вас последний совет: консоль команд. Запустив bundle console у вас не просто откроется IRB prompt, но также загрузятся весь пакет и все джемы. Если вы хотите поэкспериментировать с используемыми джемами, но у вас нету Rails джема для вызова Rails консоли, это является отличной альтернативой.
Создание нового джема
Ну и, наконец, то, что является самым полезным в бандлере после всех установок. Учитывая, что бандлер создан для управления джемами, команда бандлера очень мотивирована, чтобы сделать управление и создание джемов крайне простым. Вы можете создать папку с основой своего джема, просто запустив bundle gem NAME. Получится папка с gemspec, readme и lib файлами, куда вы можете поместить свой код. Когда вы добавили код, вы можете установить этот джем в свою систему для проверки, запустив rake install. Когда вы довольны своим джемом и хотите поделиться с остальными, поместить новую версию джема в rubygems.org можно, запустив rake release. Как побочный положительный эффект джемы, созданные таким образом, можно использовать как гит джемы. Это значит, что вы (и все остальные, использующие этот джем) можете копировать, редактировать и собирать любой коммит.
Подведём итоги
Теперь, когда вы знаете столько полезных вещей о бандлере, я предлагаю вам это протестировать. Используйте поиск, создавайте джемы!
Насколько я могу судить, бандлер больше всего полезен тем, что он упрощает процесс совместного сотрудничества и использования кода, что делает Руби лучше для всех.
Заметка: друг Engine Yard, André Arko, член команды ядра бандлера, написал для нас сию замечательную статью. Не забудьте заглянуть и на его сайт.
Системы сборки
Время чтения: меньше 5 мин
Обновлено 1 декабря 2021
Кратко
Бандлер — программа, которая упаковывает сложный проект со многими файлами и внешними зависимостями в один (иногда несколько) файл, который будет отправлен браузеру.
Самый популярный бандлер — Webpack, он используется в сложных проектах с высокими требованиями к конфигурируемости. Самый простой в использовании — Parcel, он хорошо подходит для небольших проектов без особенных требований.
Как понять
Современные проекты могут быть огромными (100 тысяч строк или даже больше), писать такие объёмы кода в одном файле совершенно невозможно. К тому же, часто нужно использовать готовые библиотеки, которые написал кто-то другой. Но, к сожалению, браузеры не очень хорошо поддерживают проекты из многих файлов. Из-за этого были придуманы системы сборки (их ещё называют бандлерами или сборщиками).
Как пользоваться
Большинство бандлеров распространяются через npm. Чтобы начать ими пользоваться, достаточно добавить соответствующий пакет.
Теперь нужно создать HTML-файл, в котором описать относительные пути до JavaScript-файлов, и запустить бандлер. Он сделает всю остальную работу.
Рядом с этим файлом следует разместить JavaScript-файл:
Теперь можно запустить бандлер и посмотреть на результат в браузере. Для этого нужно добавить новый скрипт в package.json :
В браузере будет виден HTML, и исполнится JS. Важно заметить, что в JS-файлах теперь можно безболезненно импортировать любые другие файлы — и локальные, и установленные через npm модули. Бандлер найдёт все нужные файлы и упакует в один большой файл, который отправится в браузер.
На практике
Игорь Камышев
При такой конфигурации результирующий код будет корректно работать в последних версиях браузеров, в любых версиях, которые занимают больше 1 процента на рынке браузеров.
Бандлинг всего того, что не относится к обычному JavaScript-коду
Предположим, вы работаете над веб-приложением. В таком случае весьма вероятно то, что вам приходится иметь дело не только с JavaScript-модулями, но и с самыми разными другими ресурсами. Это и веб-воркеры (их тоже пишут на JavaScript, но они обособлены от обычного кода фронтенда), и изображения, и стили, и шрифты, и WebAssembly-модули, и иные материалы, входящие в состав сайта.
Ссылки на некоторые из подобных ресурсов можно включить непосредственно в HTML-код, но часто они логически связаны с компонентами, используемыми во многих местах проектов. Например, таблица стилей для особого выпадающего списка связана с JavaScript-кодом, реализующим этот список, а изображения иконок связаны с компонентом, реализующим панель инструментов. Точно так же WebAssembly-модуль связан с JavaScript-кодом, обеспечивающим использование этого модуля. Удобнее было бы обращаться к подобным ресурсам прямо из соответствующих JavaScript-модулей и загружать их динамически тогда (или если), когда загружается соответствующий компонент.
Ресурсы разных типов, импортируемые в JS-коде
Правда, в большинстве крупных проектов используются системы для сборки таких проектов, которые выполняют дополнительные оптимизации и реорганизации контента. Например — это бандлинг и минификация ресурсов. Они не могут выполнять код и предсказывать то, каким будет результат его запуска. Они не могут и анализировать все строковые литералы в JavaScript-программах и делать предположения касательно того, является ли конкретная строка неким URL, ведущим к какому-то ресурсу, или нет. Как сделать так, чтобы бандлеры «видели» бы динамические ресурсы, загружаемые JavaScript-компонентами и включали бы их в сборку проекта?
Особые инструкции импорта в бандлерах
Одним из распространённых подходов к работе с ресурсами, не являющимися обычным JavaScript-кодом, является применение для этой цели синтаксиса статического импорта ресурсов. Некоторые бандлеры могут автоматически определять тип данных, анализируя расширение файла, а другие поддерживают плагины, позволяющие использовать особые схемы URL, как показано в следующем примере:
Когда плагин бандлера находит команду импорта, в которой либо описывается путь к файлу с особым расширением, либо явным образом используется особая схема ( asset-url: и js-url: в вышеприведённом примере), он добавляет соответствующий ресурс к графу сборки. После этого ресурсы копируются в итоговое место их хранения, выполняются оптимизации, применимые к ресурсам конкретного типа, и возвращается готовый URL, который будет использоваться во время работы кода.
Среди преимуществ такого подхода можно отметить тот факт, что использование существующих синтаксических JavaScript-конструкций для импорта ресурсов гарантирует то, что все URL будут статическими и построенными относительно текущего файла. Это упрощает загрузку подобных ресурсов системой сборки сайта.
Правда, у этого подхода есть один серьёзный недостаток: подобный код не может работать непосредственно в браузере, так как браузер не знает о том, как ему обрабатывать такие вот особые схемы импорта или расширения. Это может быть вполне приемлемо в том случае, если вы, в любом случае, контролируете весь код и полагаетесь в процессе разработки на бандлер. Но сейчас всё сильнее распространяется использование JavaScript-модулей прямо в браузере, как минимум — в процессе разработки, для того чтобы не усложнять рабочую среду. А кто-то, работающий над небольшим демонстрационным проектом, может и не нуждаться в бандлере, даже выпуская свой проект в продакшн.
Универсальный паттерн для браузеров и бандлеров
Если вы работаете над компонентом, который рассчитан на многократное использование, это значит, что вам нужно, чтобы он работал бы в любых окружениях — и непосредственно в браузере, и в виде встроенного блока достаточно крупного приложения. Большинство современных бандлеров позволяют это, распознавая в JavaScript-модулях следующую конструкцию:
Этот паттерн инструменты сборки могут выявлять статически, практически так же, как если бы это была какая-то особая синтаксическая конструкция. Но при этом перед нами — корректное JavaScript-выражение, которое работоспособно и в браузере.
Если прибегнуть к этому паттерну — вышеприведённый пример можно будет переписать так:
Давайте разберёмся с тем, как это всё работает. Вызов конструктора new URL(. ) принимает, в виде первого аргумента, относительный URL и разрешает его относительно абсолютного URL, переданного ему в качестве второго аргумента. В нашем случае вторым аргументом является import.meta.url. Эта конструкция даёт нам URL текущего JavaScript-модуля, в результате первым аргументом может быть любой путь, построенный относительно этого URL.
Неоднозначные относительные URL
Причина этого заключается в том, что, в отличие от инструкций импорта, любые динамические запросы разрешаются относительно самого документа, а не текущего JavaScript-файла. Предположим, у нас имеется следующая структура:
Но команде fetch неизвестен URL JavaScript-файла, в котором она выполняется. Она попросту разрешает URL относительно документа. В результате fetch(‘./module.wasm’) попытается загрузить файл http://example.com/module.wasm вместо того, который нужен ( http://example.com/src/module.wasm ). Эта операция окажется неудачной (или, что хуже, по-тихому будет загружен не тот ресурс, который планировалось загрузить).
Помещая относительный URL в конструкцию new URL(‘. ‘, import.meta.url) можно предотвратить эту проблему и гарантировать то, что любой предоставленный системе URL будет разрешён относительно URL текущего JavaScript-модуля ( import.meta.url ) до того, как он будет передан какому-либо загрузчику.
Если заменить fetch(‘./module.wasm’) на fetch(new URL(‘./module.wasm’, import.meta.url)) — система успешно загрузит нужный WebAssembly-модуль и, кроме того, даст бандлеру механизм для нахождения подобных относительных путей во время сборки проекта.
Поддержка импорта ресурсов различными инструментами
▍Бандлеры
Следующие бандлеры уже поддерживают механизм new URL :
▍WebAssembly
▍C/C++ через Emscripten
При использовании Emscripten можно запросить выдачу вспомогательных JavaScript-файлов в виде ES6-модулей вместо обычного JS-кода, воспользовавшись одной из следующих опций:
В данном случае сгенерированный веб-воркер будет включён в проект с использованием того же подхода, его смогут обнаружить и бандлеры, и браузеры.
▍Rust через wasm-pack / wasm-bindgen
Wasm-pack — это основной набор инструментов, предназначенный для тех, кто, для создания WebAssembly-файлов, пользуется Rust. Он тоже поддерживает несколько режимов вывода данных.
Если вам нужно пользоваться потоками WebAssembly, применяя Rust, то ситуация несколько усложняется. Для того чтобы почитать подробности об этом — загляните сюда.
Будущие возможности
▍import.meta.resolve
Специальный вызов import.meta.resolve(. ) выглядит как возможное улучшение вышеописанных механизмов импорта ресурсов. Он позволит разрешать спецификаторы относительно текущего модуля, делая это проще, без необходимости указания дополнительных параметров:
Уже существует экспериментальная реализация import.meta.resolve в Node.js, но имеются ещё некоторые нерешённые вопросы, касающиеся того, как этот механизм должен работать в веб-среде.
▍Утверждения импорта
Утверждения импорта — это новая возможность, которая позволяет импортировать типы, отличные от ECMAScript-модулей. Их использование пока ограничено импортом JSON-ресурсов:
Они, кроме того, могут использоваться бандлерами и способны заменить паттерн new URL в ситуациях, где применяется этот паттерн. Но типы в утверждениях импорта добавляются с учётом каждого конкретного сценария их использования. Так, сейчас поддерживается лишь JSON, скоро должна появиться поддержка CSS-модулей, а вот для работы с ресурсами других видов всё ещё нужно более универсальное решение. Подробности об этом можно почитать здесь.
Итоги
Как видите, существуют различные способы включения в состав веб-проектов ресурсов, не являющихся обычным JavaScript-кодом. Эти способы имеют различные недостатки, они не подходят для использования в абсолютно всех наборах инструментов веб-разработки. В будущем, возможно, появятся механизмы, которые позволят импортировать подобные ресурсы с использованием особых синтаксических конструкций, но мы ещё до подобных вещей не добрались.