Kaip pridėti „JavaScript“ prie „Rails 6“ programos

Būdamas jaunesniuoju „Full-Stack“ kūrėju, pagrindinis mano dėmesys buvo sutelktas į „backend“. Norėjau sužinoti, kaip užprogramuoti savo vidinį serverį, kad jis teiktų mano žiniatinklio programą.

Bet sužinojęs užpakalinės sistemos pagrindus, sužinojau, kad priekinė buvo tokia pat svarbi kaip ir vidinė. Vienas iš būdų padidinti žiniatinklio programos gyvumą yra pridėti „JavaScript“.

„JavaScript“ yra būtinas norint pridėti interaktyvumo jūsų žiniatinklio programoje. Žinoma, dabar tai tapo kur kas daugiau. Tai programavimo kalba, kuria naudojasi interneto naršyklės. Daugelis jūsų aplankytų svetainių savo priekinėje dalyje naudoja tam tikrą „JavaScript“ kodą.

Galbūt pradėjote naudoti „Ruby on Rails“ kurdami savo žiniatinklio programą ir galvojote, kaip pridėti „JavaScript“ prie savo kodo. Šiame straipsnyje aš jums parodysiu, kaip pridėti „JavaScript“ kodą prie programos „Rails“.

Kodėl „JavaScript“?

Jums gali kilti klausimas, kodėl jums pirmiausia reikia „JavaScript“ jūsų žiniatinklio programoje. Trumpai tariant, jei neįtrauksite jokio JS, tada jūsų žiniatinklio programos vartotojo patirtis nebus gera.

Tarkime, kad turite formą, kurią užpildo vartotojas, ir norite patvirtinti formą. Jei vartotojas pateikia formą neužpildydamas tinkamų verčių, formos puslapis turi būti vėl įkeltas, pataikydamas į serverį ir vėl pasirodęs vartotojui. Tai užima daug laiko ir tikriausiai erzins vartotoją.

Žinoma, kartais galite išsisukti patvirtindami HTML formas, tačiau tai ne visada įmanoma. Kur kas geriau pridėti paprastą scenarijų, kuris patikrina vartotojo įvestis ir praneša jiems, kad jie turėtų įvesti teisingą informaciją.

Žinoma, tai nereiškia, kad galite nepaisyti serverio pusės patvirtinimo, tačiau tai skirtas kitam straipsniui.

Kitas naudojimo atvejis yra failų asinchroninis įkėlimas, kurį galite padaryti naudodami „JavaScript“ neperkraunant viso puslapio. Gali būti, kad naudojote kai kurias žiniatinklio programas, į kurias įkeliant daugiau nuotraukų ir straipsnių slenkant žemyn nereikia atnaujinti ar keisti puslapio vėl ir vėl.

Šie ir kiti naudojimo atvejai yra puikios priežastys naudoti „JavaScript“ jūsų programoje. Tiesą sakant, „JavaScript“ paklausa didėjo. Jūs netgi galite naudoti jį rašydami savo vidinę programą.

Bet mes mėgstame „Rails“, todėl kurį laiką laikysimės.

Ką mes čia aptarsime

Rašymo metu naujausia sistemos versija yra „Rails 6“ ir ji pakeitė sąveiką su „JavaScript“.

Iki „Rails 6“ turėjome išteklių, skirtų valdyti CSS ir „JavaScript“ failus. Bet pradedant „Rails 6“, „Webpacker“ yra numatytasis „JavaScript“ kompiliatorius. CSS vis dar valdo turto dujotiekis, tačiau galite naudoti „Webpack“ ir sudaryti CSS.

„JavaScript“ aplanko nerasite toje pačioje vietoje, kaip ir „Rails 5“. „JavaScript“ katalogų struktūra pakeista į „ app / javascript / packs / folder“.

Tame aplanke rasite failą application.js , kuris yra panašus į failą application.css . Pagal numatytuosius nustatymus jis bus importuotas faile application.html.erb, kai sukursite naują programą „Rails“.

Application.html.erb failas bus naudojamas visų nuomonėmis.

Pridedamas scenarijus, kurį naudos visos peržiūros

Jei norite, kad jūsų „JavaScript“ būtų prieinama visuose rodiniuose ar puslapiuose, galite tiesiog jį įdėti į failą application.js :

require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") console.log('Hello from application.js')

Pirmosios keturios eilutės yra pagal numatytuosius nustatymus. Pridėjau console.logpareiškimą, kad parodyčiau, jog „JavaScript“ bus prieinama visur.

Tai galite išbandyti peržiūrėję bet kurį savo programos puslapį ir atidarę kūrėjo pultą.

Tačiau ne visada norite, kad „JavaScript“ kodas būtų įkeliamas kiekviename puslapyje. Vietoj to, scenarijų galite padaryti prieinamą tik apsilankę konkrečiame puslapyje.

Pridedamas scenarijus, kurį naudos konkretus failas

Jei norite, kad „JavaScript“ būtų prieinamas tik konkrečiam rodiniui, galite naudoti „ javascript_pack_tag“, kad importuotumėte tą konkretų failą:

I want my JS here only

console.log('Hello from My JS')

Atminkite, kad failą turite pridėti pakuočių kataloge. „ Javascript_pack_tag“ taip pat turėtų būti nurodytas jūsų sukurto „JavaScript“ failo pavadinimas.

Dabar scenarijus bus paleistas tik tada, kai į naršyklę bus įkeltas konkretus rodinys, kuriame yra „ javascript_pack_tag“ .

Apvyniojimas

Tikiuosi, kad šis straipsnis padės išaiškinti bet kokią painiavą atnaujinant programą į „Rails 6“ arba ką tik pradėjus naudoti „Rails“.

Jei norite sužinoti daugiau, galite sekti mane per „Github“.