Blazor: как лучше всего включать скрипты и стили главной страницы?

В проекте Blazor по умолчанию мы получаем Pages/_Host.cshtml файл, который содержит что-то вроде HTML-шаблона для приложения.

Недавно я создал свою первую библиотеку компонентов Razor (RCL), и она работает. Вот часть скриптов для этого:

<script src="_content/Woof.Blazor/js/woof.js"></script>
<script src="_content/Woof.Blazor/js/modal.js"></script>
<script src="_content/Woof.Blazor/js/input.js"></script>
<script src="_content/Woof.Blazor/js/datatable.js"></script>
<script src="_content/Woof.Blazor/js/autocomplete.js"></script>

Скрипты вручную включены в мое приложение. Есть ли способ для библиотеки автоматически добавлять эти файлы в шаблон приложения? Кстати, было бы здорово, если бы таблицы стилей тоже можно было добавлять автоматически.

РЕДАКТИРОВАТЬ: Я просто пытался создать _Scripts.cshtml файл, но это не сработало. Visual Studio показала много странных ошибок, вероятно, вызванных отсутствием пакета, но я не знаю. Делать скрипты частью частичного представления? На самом деле это не часть MVC. Так что, наверное, я ошибаюсь.

Я хочу заменить всю часть сценариев, приведенную выше, одной строкой, включая все предопределенные и предварительно настроенные сценарии из моей библиотеки.


blazor blazor-server-side asp.net-blazor
person Harry    schedule 26.04.2020    source источник
comment
@HenkHolterman Конечно, порядок включения ресурсов имеет значение, поэтому поддержка не обязательно должна быть полностью автоматической, но и полностью ручной. Скажем, JS - если RCL определяет порядок загрузки скриптов, почему бы не загружать их в этом порядке? Порядок может быть определен таким образом, как предыдущий образец скриптов, а затем упорядочение отдельных файлов. Совершенно возможно.   -  person Harry    schedule 27.04.2020
comment
Думаю, вам стоит взглянуть на изоляцию CSS / JS: Публикация автономного компонента Blazor (Razor + CSS + JS) в виде пакета NuGet   -  person meziantou    schedule 21.01.2021

Ответы (3)


arrow_upward
4
arrow_downward

Из коробки нет ничего доступного для того, что вы пытаетесь сделать. Причина в том, что иногда действительно имеет значение порядок скриптов и тегов CSS.

Например, если я переопределю некоторые классы из Bootstrap, но включу свой тег файлов CSS перед тегом для начальной загрузки, это не сработает. Если бы файлы CSS и JS были автоматически, не было бы способа контролировать порядок, приводящий к этой проблеме.

В ответ на ваш вопрос вы перечисляете несколько скриптов, имеющихся в вашей библиотеке. Я бы посоветовал объединить и минимизировать эти сценарии в один файл. Тогда вам нужно будет добавить только одну ссылку в любое приложение-потребитель. Это также ускорит загрузку приложения-потребителя, ему нужно будет загрузить только один скрипт, а не 5.

Есть несколько способов добиться этого, но я думаю, что наиболее распространенным сейчас является webpack. Быстрый поиск в Google покажет 10 сообщений в блоге, показывающих конфигурацию для этого, например, https://ideas.byteridge.com/webpack-minifying-your-production-bundle/. Все это также можно автоматизировать в конвейере сборки, чтобы его можно было использовать с полным CI / CD.

person Chris Sainty    schedule 26.04.2020
comment
Нам следует подумать о том, как сделать так, чтобы наши библиотеки компонентов были готовы к включению в пакет пользовательского решения. - person dani herrera; 26.04.2020
comment
Что ты имеешь в виду, Дэни? - person Chris Sainty; 26.04.2020
comment
Когда кто-то создает и публикует компонент, обычно он говорит: «Добавьте скрипт _content / bhlah / blah.js в _Hosts.cshtnl» (или index.html). Это выглядит странно для пользователей, которые хотят использовать webpack для своих собственных проектов. То же самое для .css файлов и sass. Это просто комментарий. Ваш ответ выглядит великолепно. - person dani herrera; 26.04.2020
comment
Я думаю, что понял. Я не думаю, что люди действительно смотрели / думали об объединении в Blazor. Я вижу множество приложений с несколькими несвязанными и неминифицированными скриптами CSS и JS. Честно говоря, даже мои пакеты Blazored не поставляются с минимизированными CSS и JS - это в моем списке TODO :) Я мог бы написать сообщение в блоге об этом на самом деле ... - person Chris Sainty; 26.04.2020
comment
Ну вот чем я закончил. Я использую расширение Bundler & Minifier, оно отлично работает с объединением, но не может справиться с минимизацией моего современного JS. - person Harry; 27.04.2020

arrow_upward
1
arrow_downward

Для CSS вы можете попробовать мою библиотеку - BlazorStyled (https://BlazorStyled.io). Он динамически добавляет в таблицу стилей стили, которые не нужно включать в шаблон. Есть и другие преимущества, такие как - вы определяете свои стили внутри своего компонента, и никогда не будет конфликтов css, поэтому вам больше никогда не придется использовать! Important. Если вы использовали что-то вроде эмоции или гламура в реакции / подсказке / угловом, это похоже на те.

person Chanan Braunstein    schedule 26.04.2020

arrow_upward
0
arrow_downward

В .net 5 для css вы можете использовать Изоляция CSS. он прикрепляет содержимое css к каждому компоненту, но для файлов js вам нужно загрузить все в _Host.cshtml, и вы не можете загружать их изолированно, вы можете просто вызвать необходимую функцию js позже.

person Ali Borjian    schedule 21.01.2021