Сторибоок је моћан алат за изградњу УИ компоненти у изолацији. Помаже вам да креирате и тестирате компоненте без покретања целе апликације.
Ако сте икада користили Сторибоок са Нект.јс, приметићете да морате да га конфигуришете да правилно рукује ЦСС-ом и сликама. Процес може бити фрустрирајући, али ови једноставни кораци ће вам помоћи да водите пут.
Започните постављањем пројекта Нект.јс
Ако већ немате подешен Нект.јс пројекат, пратите званични Нект.јс Водич за почетак за креирање новог пројекта.
Иницијализујте књигу прича
Покрените следећу команду у терминалу да бисте иницијализовали Сторибоок.
нпк сб инит --буилдер вебпацк5
Ова команда открива пројекат на којем радите, инсталира све потребне пакете и креира примере прича.
Подесите ЦСС
Прва ствар коју треба да урадите је да укључите глобалну ЦСС датотеку у превиев.јс.
Подесите глобалне стилове
Глобални стилови се примењују на целу апликацију. Да бисте применили ове стилове у причама, можете да увезете датотеку у појединачне приче и то би функционисало. Међутим, на крају бисте поново написали изјаву о увозу у многим причама или чак заборавили.
Боље решење је увоз глобалних стилова у .књига прича/превиев.јс датотека, датотека која садржи све дељене конфигурације за Сторибоок.
На врху .сторибоок/превиев.јс укључите следећу изјаву за увоз.
увоз "../стилес/глобалс.цсс";
Подесите Сасс за Сторибоок у Нект.јс
Подразумевано, Сторибоок не долази са готовом подршком за Језик проширења Сасс. Морате да проширите конфигурацију веб пакета тако што ћете инсталирати стиле-лоадер, цсс-лоадер и сасс-лоадер.
нпм и -Д стиле-лоадер цсс-лоадер сасс-лоадер
Ево шта раде ови пакети:
- стиле-лоадер убацује ЦСС у ДОМ.
- цсс-лоадер тумачи @импорт и УРЛ() као импорт/рекуире и решава их.
- сасс-лоадер учитава СЦСС у ЦСС.
Да бисте конфигурисали ове пакете, додајте следећи код у .сторибоок/маин.јс:
конст пут = захтевају('пут');
модул.екпортс = {
// друге конфигурације
вебпацкФинал: асинц (конфигурација) => {
цонфиг.модуле.рулес.пусх(
{
тест: /\\.s(a|c)ss$/,
укључује: патх.ресолве (__дирнаме, '../'),
користити: [
'стиле-лоадер',
{
лоадер: 'цсс-лоадер',
Опције: {
модули: {
ауто: истина,
лоцалИдентНаме: '[наме]__[лоцал]--[хасх: басе64:5]',
},
},
},
'сасс-лоадер'
],
},
);
повратак цонфиг;
}
}
Након овога, Сасс би требао бити доступан у Сторибоок-у.
Примените неоптимизовани Проп на Нект.јс слике
Нект.јс има много функција оптимизације. Једна од њих је оптимизација слике кроз компоненту слике која чини да се слике брже учитавају и прилагођавају екрану. Међутим, тешко је радити у Сторибоок-у јер Сторибоок ради изоловано од Нект.јс окружења. Боље је де-оптимизовати слике у причама.
За почетак, потребно је да послужите јавни директоријум у Сторибоок-у да бисте назначили где се слике налазе. Можете то учинити у нпм скрипте карта у пацкаге.јсон датотеку или у .сторибоок/маин.јс.
У пацкаге.јсон, ажурирајте скрипте Сторибоок да служе јавном директоријуму.
"скрипте": {
"књига прича": "старт-сторибоок -п 6006 -с ./јавно",
"буилд-сторибоок": "буилд-сторибоок -с јавно"
}
Алтернативно, модификујте ./сторибоок/маин.јс да укључи статички директоријум који је, у овом случају, јавна фасцикла.
модул.извоза = {
// друге конфигурације
"статицДирс": [ "../јавно" ],
}
Након приказивања јавног директоријума, примените неоптимизовани проп на Нект.јс слике које се користе у причама.
У .сторибоок/маин.јс додајте следећи код:
увоз * као НектИмаге из "следећа/слика";
конст ОригиналНектИмаге = Следећа слика.Уобичајено;
Објекат.дефинеПроперти (НектИмаге, "Уобичајено", {
подесиво: истина,
вредност: (реквизити) => (
<ОригиналНектИмаге
{...реквизити}
неоптимизовано
/>
),
});
Овај код користи неоптимизовани проп свуда где се користи компонента слике.
Коришћење Сторибоок у Нект.јс
Књига прича је један од оних алата за које мислите да су превише заморни за коришћење, али када почнете да их користите, схватите шта сте пропустили. Помоћу Сторибоок-а можете креирати и тестирати различите компоненте без покретања целе апликације. То, дакле, чини изградњу компоненти од темеља једноставном.
Ако користите Нект.јс, уверите се да сте конфигурисали ЦСС и де-оптимизовали слике пре него што почнете.
