Blazor: как лучше всего включить сценарии и стили главной страницы? - PullRequest
Новая
       53

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

2 голосов
/ 26 апреля 2020

В проекте 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. Поэтому, вероятно, я ошибаюсь.

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

Ответы [ 2 ]

4 голосов
/ 26 апреля 2020

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

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

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

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

1 голос
/ 26 апреля 2020

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

...