Gatsby, Typescript və SASS istifadə edərək super sürətli statik sayt necə yaradılır

Bu yaxınlarda portfel saytımı Gatsby ilə yenidən hazırladım. Budur özünüzə necə başlaya bilərsiniz.

Gatsby ilə başsız bir CMS-dən yaradılan super sürətli bir statik sayt yarada bildim. O qədər xoşuma gəldi ki, bir başlanğıc repo yığdım. Yalnız başlanğıc reposuna atlaya və ya davam etmək üçün addım-addım təlimat üçün bu məqaləni oxuya bilərsiniz.

İmtina 1: Düşünürəm ki, Gatsby sənədlərini olduqca hərtərəfli olduğu üçün oxumalısınız. Əvvəlcə bunlara baxın - bu məqalə Gatsby əsaslarını əhatə etmir.

İmtina №2: Bu təlimatda Gatsby versiyası 2-dən istifadə edirəm. Gatsby'nin beta versiyasından istifadə etmək istəmirsinizsə, bu xüsusi təlimə riayət etməyinizi məsləhət görmürəm.

İmtina # 3: Bu təlimatda NPM əvəzinə İplik istifadə edəcəyəm. Bunu Netlify-yə yerləşdirdiyim zaman NPM ilə problemlər yaşadım, amma bunlar İpliklə düzəldildi. Netlify tətbiq etməyi planlaşdırmırsınızsa, hər ikisi yaxşı işləyir.

1. Yeni bir Gatsby layihəsi yaradın

Əgər hələ etməmisinizsə, Gatsby CLI quraşdırın və yeni bir layihə yaradın:

gatsby yeni sayt adınız https://github.com/gatsbyjs/gatsby-starter-hello-world

Veb saytına nəzər yetirsən, Gatsby'nin artıq bir tətbiqin başlanğıcını verdiyini görəcəksən. Həm NPM, həm də İplik quraşdırıldığından həm paket-lock.json faylı, həm də bir iplik.lock faylı yaradıldı. Lazımsız sənədləri sildiyinizə əmin olun. Gatsby'nin verdiyi başlanğıc nöqtəsini görmək istəyirsinizsə, gatsby inkişaf etdirin və buna bənzər bir şey görməlisiniz:

Yəni vay. Çox təəccüblü.

2. Gatsby SASS plaginini birləşdirin

Gatsby-də, pərdə arxasında Veb paketi ilə birləşdirilə bilən bir çox plagin var ki, bu da layihənizə inteqrasiya etməyi asanlaşdırır. Gatsby SASS plaginini quraşdırın:

İplik Node-Sass Gatsby plugin-Sass əlavə edin

Həm Node-Sass, həm də Gatsby-Plugin-Sass-ı əlavə etməliyik, çünki Node-Sass Gatsby-Plugin-Sass-ın həmyaşıd asılılığıdır.

Bunu qurduqdan sonra layihənin kök qovluğunda gatsby-config.js adlı bir fayl yaradın. Çox güman ki, təxmin etdiyiniz kimi, bu fayl platsinlər daxil olmaqla Gatsby-yə məxsus parametrləri idarə edir. Gatsby-config.js-də aşağıdakıları əlavə edin:

module.exports = {Plugins: [`Gatsby-Plugin-Sass`,],}

Bu xüsusən Gatsby-yə əvvəllər quraşdırdığımız Sass plaginini istifadə etmək istədiyimizi bildirir.

Yeni quraşdırılmış plagininizin həqiqətən işlədiyindən əmin olmaq üçün indeksi.js-dən src / pages şəklində dəyişək:

'./Index.module.scss' formatından şablon şablonları kimi "reaksiya" verərək idxal reaksiya 'idxal ixrac standartı () => ( Salam dünya! CSS ön prosessorları olduqca yaxşıdır. );

Bu qovluğa "Index.module.scss" faylı əlavə edək və səhifəmizi bir az dizayn edək:

.Konteyner {maksimum genişlik: 60rem; margin: 3rem auto 0; Yazı növü ailəsi: sans serif; h1 {rəng: # 333; } p {color: #aaa; }}

Hər şey yaxşı keçibsə, serverinizi yenidən başladın və gatsby inkişafını göstərməlidir:

Çox üslub.

3. Typescript plaginini birləşdirin

İndi hər şeyin üstünə bir neçə yazılmış element əlavə etməyin vaxtıdır. Əvvəlcə yazı tipini və Gatsby yazı tipi plaginini quraşdırın:

İplik yazı tipi gatsby plagin yazı tipi əlavə edin

Eklentini gatsby-config.js dosyanıza əlavə etdiyinizə əmin olun. Həm də konfiqurasiya sənədinə bir sayt adı və etiket xətti əlavə edəcəyik. Son kod belə görünür:

module.exports = {siteMetadata: {ad: `Salam Typescript Dünyası! ', Şüar:' Gatsby + SASS + Typescript = `}, Plugins: [` Gatsby-Plugin-Sass`, `gatsby-plugin-typescript`,] ,}

Plagin qurulduqdan sonra indeks sənədimizi javascript əvəzinə typcript istifadə etmək üçün yeniləyəcəyik. Faylın adını index.tsx olaraq dəyişdirin və başlanğıc nöqtəsi olaraq aşağıdakı kodu istifadə edin:

idxal * 'reaksiya' reaksiyası olaraq * '. biçim şablonları kimi idxal' ./Index.module.scss 'interfeysi IndexPageProps {} ixrac standart sinfi IndexPage React.Component {public render () {return ( Salam dünya! CSS ön prosessorları olduqca yaxşıdır. )}}

İndi Typescript istifadə etdiyimiz üçün, bir graphQL sorğusundan istifadə edərək saytın adını və etiket xəttini daxil edək. GraphQL Gatsby'nin ayrılmaz bir hissəsidir və dərhal göndərilir.

Gatsby yaradılması prosesinin bir hissəsi olaraq, konfiqurasiya dosyanızı avtomatik olaraq alır və gatsby-config ixracatını graphQL sorğuları vasitəsi ilə əldə edir. Veb saytın adını və etiket xəttini əldə etməyimizə imkan verən ilk sorğumuz:

ixrac const indexPageQuery = graphql` sorğusu IndexPageQuery {səhifə? Site {siteMetadata {ad şüarı}}}

Yazı tipi istifadə etdiyimiz üçün bu məlumatlar üçün də növlər təqdim etməliyik. Gatsby avtomatik olaraq bizim grafik qrafik sorğularımızı alır, onları icra edir və bütün məlumatları məlumat adlanan bir obyekt vasitəsilə əldə edir. İndeks səhifəmizə məlumatlar üçün bir interfeys yazaq:

interfeys IndexPageProps {data: {page? ˅: {siteMetadata: {name: string; tagline: string; }}}}

Artıq məlumatlarımız var və interfeys yazılıb, gəlin hər şeyi ümumiləşdirək. İndex.tsx sənədimizin son versiyası:

idxal * 'reaksiya' reaksiyası olaraq {graphql} 'gatsby' dən idxal * format şablonları kimi idxal './Index.module.scss' interfeysi IndexPageProps {data: {page? ˅: {siteMetadata: {name: string; tagline: string; }}}} ixrac const indexPageQuery = graphql` sorğu IndexPageQuery {səhifə? Site {siteMetadata {Name Slogan}}} ʻExport standart sinif IndexPage, React.Component-i genişləndirir. {public render () {const {name, slogan} = this.props.data.site.siteMetadata return ( {Soyad} {tagline} )}}

Aaaaaaund serverini yenidən başladın ... .

Bütün .

İşlədi!

Gatsby ilə əlaqəli bir uğur üçün Gatsby ilə əlaqəli bir mem.

Bonus: .SCSS sənədləri üçün səssiz yazı tipli xəbərdarlıqlar

Bütün bu addımları izlədikdən sonra ./Index.module.scss ilə əlaqəli bir xəbərdarlıq görə bilərsiniz.

Əgər bu probleminiz varsa, bu (yalan) xəbərdarlıqların səssizləşdirilməsi barədə yazmağa qərar verdim.

Növbəti addımlar

Gatsby ilə əlaqəli böyük bir şey, başqa yerlərdən məzmun almağın nə qədər asandır. Portfelimdə GraphQL dəstəyi olan başsız bir CMS olan Contentful-dan məlumatları götürürəm. Contentful-dan məlumat əldə etmək barədə daha çox öyrənmək istəyirsiniz? Bütün bunları yazmağa qərar verdim.

Yeniləmə (11.06.2008):

Başlanğıc reposuna yazı linteri əlavə etmək qərarına gəldim. Daha çox bilmək istəyirsinizsə, bu barədə bir məqalə yazdım.

Yeniləmə (27.11.2008):

Gatsby-nin beta ilə bitdiyini göstərmək üçün bu yazını yenilədim. Bunu radarımda gördüyünə görə Olivia'ya təşəkkür edirəm! Ayrıca .scss faylları üçün Typescript xəbərdarlıqlarının səssizləşdirilməsinə dair bir hissə əlavə etdim.