✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Täydellinen opas kehitysympäristön luomiseen Gutenbergille

3

Tämä opas on tarkoitettu sinulle, joka haluat kirjoittaa koodia Gutenbergille ES6-, ESNext- ja JSX-syntaksilla, ja sinun on määritettävä verkkopaketti ja babel muuntaaksesi ne tiedostoiksi, joita voit käyttää Gutenberg-editorissa. Katsomme, mitä sinun on tehtävä, miksi ja kuinka voimme käyttää ja laajentaa WordPressin oletusasetuksia ja mukauttaa niitä tarpeisiimme.

Jos olet täysin uusi npm-, webpcak- ja Babel-konseptien suhteen, sinun tulee lukea seuraava osio, jonka tarkoituksena on selittää näiden työkalujen perusasiat ja kuinka käytät niitä. Jos olet kuitenkin tehnyt tämän aiemmin ja olet perehtynyt prosessiin, ehkä kehittämällä Reactin avulla, siirry seuraavaan osioon, jossa me itse asiassa määritämme asiat.

Aloittelijoille: npm, webpack ja babel

Jos et ole varma, miksi meidän on tehtävä kaikki tämä Javascriptin kirjoittamiseksi Gutenbergille, suosittelen, että luet viestini, joka käsittelee Gutenbergin kehittämisen perusteita – missä selitän Javascript-versioiden erot ja miksi se vaivan arvoista.

Jos et ole koskaan tehnyt tätä ennen, sinun on ensin asennettava Node.js tietokoneellesi. Napsauta linkkiä, lataa ja asenna se. Node.js:n mukana saat työkalun, jonka avulla määritämme suurimman osan määrityksistä. Tämä työkalu on npm, jonka avulla voit asentaa Javascript-kirjastoja ja suorittaa komentosarjoja komentorivin/päätteen kautta. Voit vaihtoehtoisesti käyttää yarn, jos haluat, mutta tässä oppaassa käytämme npm.

npm

Tässä oppaassa ei käsitellä yksityiskohtaisesti kaikkia asioita, joita voit tehdä npm, mutta se selittää sen peruskäsitteen ja asioita, jotka ovat merkityksellisiä tarkoituksiin. Käytämme npmkahteen asiaan; tarvittavien kirjastojen asentamiseen projektiimme ja komentojen suorittamiseen Javascript-tiedostojemme rakentamiseksi (kääntämiseksi).

npmVoit asentaa mitä tahansa julkisia avoimen lähdekoodin Javascript-paketteja. Jos kehitämme Reactin kanssa (WordPressin ulkopuolella), meidän on asennettava React-kirjastot ja verkkopakettikirjastot. WordPress tarjoaa laajan valikoiman kirjastoja (pääasiassa Gutenbergille), jotka voit asentaa, mutta olemme todella kiinnostuneita vain yhdestä: @wordpress/scripts– joka auttaa meitä yksinkertaistamaan määrityksiämme.

Aina kun asennat kirjaston, npmse luo alikansion " node_modules", johon asennetut kirjastot on tallennettu. Sinun ei koskaan tarvitse kirjoittaa tähän kansioon tai muuttaa täällä mitään, mutta muista, että tämä kansio sisältää helposti (kirjaimellisesti!) kymmeniä tuhansia Tämä on kansio, jota sinun ei pitäisi koskaan sitoutua gitiin tai sisällyttää mihinkään valmiiseen teemaan tai laajennukseen. Kirjastoja tarvitaan vain kehitettäessä.

Kun ympäristösi on määritetty, voit käyttää npmsitä tiedostossasi määritettyjen komentosarjojen suorittamiseen package.json. Projektista riippuen sinulla on yleensä vähintään kaksi komentosarjaa; yksi skriptien rakentamiseen ja toinen "katselutilan" käynnistämiseen. "Katsotilassa" npmkäynnistää päätteessä prosessin, joka odottaa ja kuuntelee mihin tahansa tiedostoon tehtyjä muutoksia ja kokoaa ne ajon aikana aina, kun painat Tallenna-painiketta. Saatat tuntea tämän käsitteen, jos olet aiemmin käyttänyt SCSS- tai LESS-kääntäjäohjelmia. On paljon tehokkaampaa ajaa taustalla "katso"-skripti, joka käännetään uudelleen joka kerta, kun tallennat, sen sijaan, että menisi terminaaliin ja suorita koontikomento jokaisen muutoksen jälkeen.

webpack ja babel

Voit hankkia kehittämällä Gutenbergille ilman webpack- tai babel-konfigurointia. Koska käytämme WordPressin kirjastoja, he hoitavat sen puolestamme. Tällä on kuitenkin yksi haittapuoli – se on oletuksena kiinteä sijainti ja tiedostonimi sekä lähde- että tulostiedostoille. Koko Javascript-kehitys on kirjoitettava yhteen tiedostoon, project-folder/src/index.jsja koontiversio päätyy aina tiedostoon project-folder/build/index.js. Jos tämä sopii sinulle, voit ohittaa koko verkkopaketin määrittämistä koskevan osan. Jos olet kuitenkin kehittämässä teemaa tai laajennusta, jossa on useita Gutenberg-ominaisuuksia (mukautettuja lohkoja, suodattimia jne.), saatat haluta ainakin eri tulostiedostonimen ja -sijainnin sekä sallia useiden tiedostojen käytön.

Jos käytät WordPress-pakettia asennukseen (@wordpress/scripts), Babel on jo määritetty. Mutta sinun tulee olla tietoinen siitä, että WordPress-paketti ei välttämättä sisällä laajennuksia, joita saatat haluta käyttää. Siellä on esimerkiksi paketti, jonka avulla voit käyttää uusia ns. "nuolifunktioita" (myFunction = (param) => { }) funktioiden määrittämiseen ilman sidontaa this. Jos haluat ehdottomasti käyttää näitä ESNext-ominaisuuksia, sinun on määritettävä Babel itse sen sijaan, että käytät WordPressin oletusasetuksia. Käyn läpi miten alla.

Prosessi

Webpack-kehitysprosessi, kun kaikki on asennettu ja asennettu, on navigoida projektikansioon terminaalissa ja käynnistää "katso"-skripti. Se pysyy auki ja kuuntelee JS-tiedostoihisi tehtyjä muutoksia. Aina kun painat Javascript-tiedostoissasi Tallenna-painiketta, pääte antaa (toivottavasti) tiedon, että se on käännetty uudelleen onnistuneesti. Jos käännösvirheitä oli, ne näkyvät päätteessä. Pysäytä "katselu" painamalla CTRL + C.

Ympäristön järjestäminen

Oletan, että sinulla on jo paikallinen WordPress, joka on käynnissä jossain LAMP-pinossa (ohjelmat, kuten WampServer, XAMPP, Docker tai vastaavat), ja että sinulla on joko laajennus tai teema valmiina Javascriptin koodaamiseen.

Suosittelen luomaan Javascriptin kehittämiseen omistetun alikansion, koska saatat päätyä useisiin asetustiedostoihin ja kansioihin. Tämä helpottaa tiedostojen ja kansioiden (esimerkiksi node_modules/) erottamista, joita et halua sisällyttää git-toimituksiin tai lopullisiin koontiversioihin. Mutta on täysin hienoa käyttää pääteemaa tai laajennuskansiota projektikansiona Javascriptin kehittämiseen.

Siirry päätteessä (Mac OS -pääte tai Windowsin komentokehote toimivat hyvin) projektikansioon. Mitä tulee tähän opetusohjelmaan, oletan, että olemme teemassa ja olemme luoneet tyhjän alikansion gutenberg-dev/projektikansioksemme.

Ensimmäinen askel on npm-projektin alustaminen – mikä periaatteessa vain käskee npmluoda package.jsontiedoston. Tämä package.jsontiedosto kertoo npm, mitä paketteja tarvitaan ja mitä komentosarjoja on käytettävissä. Kirjoita tämä terminaaliin;

npm init -y

Tämä luo package.jsontiedoston oletussisällöllä projektikansioosi.

Seuraavaksi asennamme WordPress-paketin, joka auttaa meitä vähentämään tarvittavien määritysten määrää. Suorita tämä komento:

npm install --save-dev --save-exact @wordpress/scripts

Tunniste --save-devilmoittaa npm, että annetut kirjastot ovat välttämättömiä vain kehitystä varten, ja --save-exactvarmistaa, että npmvain yksi versio, uusin, asennetaan.

Avaa package.jsontiedosto editorissasi. (npmon myös luonut package-lock.jsonpaketteja asennuksen yhteydessä, voit jättää tämän tiedoston huomioimatta, package.jsonteet siihen muutoksia). Sen pitäisi olla täytetty oletuskokoonpanolla, ja saatat huomata, että aiemmin tekemämme paketin asennus lisäsi @wordpress/scriptstietyn version merkinnän devDependencies. Kun asennat lisää paketteja, npmpäivitetään package.jsonkunkin paketin merkinnöillä. Tässä tiedostossa meidän on huolehdittava vain scriptsominaisuuksista, jotka ovat skriptejä (komentoja), joita voit käyttää npmsuorittamaan. Päivitä komentosarja-ominaisuus tähän (voit poistaa oletusarvoisen "testin"):

"scripts": { "build": "wp-scripts build", "start": "wp-scripts start" },

Tämä koodinpätkä kertoo npm, että meillä on kaksi skriptiä, joita voimme ajaa tässä projektikansiossa; "rakenna" ja "aloita". Suoritamme komentosarjan komennolla npm run <scriptname>, joka npmetsii package.jsonja suorittaa sen arvoksi määritellyn komennon. Käytämme wp-scriptsjuuri asentamamme paketin mukana tullutta työkalua joko kääntämään Javascriptin kerran ("build") tai käynnistämään "katso" / "kuuntele" -tilan kääntääksemme aina, kun tallennamme muutokset ("start").

Tämä mahdollistaa myös WordPressin verkkopaketin ja Babel-konfiguroinnin käytön, joten meidän ei tarvitse tehdä sitä itse.

Luo projektikansioosi alikansio nimeltä src/. Luo tämän kansion sisällä index.jstiedosto.

Jos verkkopaketin oletusasetukset ovat kunnossa, olet nyt valmis! Kirjoita ES6- ja JSX-koodisi sisään index.jsja käske npmkääntää ne joko suorittamalla build-komento:

npm run build

tai käynnistä "katselu"-prosessi terminaalissa, joka kuuntelee tällä komennolla tehtyjä muutoksia (katsominen lopetetaan painamalla CTRL+C):

npm run start

Jos suoritat jommankumman näistä, projektisi hakemistoon luodaan build/alikansio, jossa on käännetty tulos build/index.js.

Siinä kaikki perusympäristön asennukseen! Olet nyt valmis kirjoittamaan ES6 Javascriptin Gutenbergille!

Jos haluat muuttaa lähde- tai tulostiedostojesi sijaintia ja tiedostonimiä, lue eteenpäin.

Lähde- ja tulostiedostojen nimien ja polkujen määrittäminen

Jos et, kuten minä, ole tyytyväinen oletustiedostonimeen ja -rakenteeseen – etenkään tulostiedostojen osalta, sinun on tutkittava verkkopaketin konfigurointia. Normaalisti, jos esimerkiksi kehitit Reactille WordPressin ulkopuolella, sinun on määritettävä täydellinen verkkopakettikokoonpano Babel-laajennuksella. Onneksi WordPress huolehtii tästä puolestamme ja antaa meille mahdollisuuden laajentaa WordPressin omaa verkkopaketin konfiguraatiota ja säätää vain niitä osia, joita haluamme muuttaa.

Luo projektikansioosi (sama kansio kuin package.json) tiedosto nimeltä webpack.config.jsja avaa se editorissasi. Kirjoita tähän tiedostoon seuraava:

const defaultConfig = require("@wordpress/scripts/config/webpack.config"); const path = require('path'); module.exports = { ...defaultConfig, entry: { 'block-mynamespace-myblock': './src/block-mynamespace-myblock.js' }, output: { path: path.join(__dirname, '../assets/js/gutenberg'), filename: '[name].js' } }

Ensimmäinen asia, jonka teemme, on noutaa @wordpress/scriptsverkkopaketin konfiguraatio muuttujaan defaultConfig. Webpack-kokoonpanon sisällä module.exportsensimmäinen asia, jonka teemme, on soveltaa kaikkea levitysoperaattorilla defaultConfig( ...). Nämä kaksi osaa varmistavat, että laajennamme WordPressin verkkopaketin konfiguraatiota sisällyttämällä kaikki sen sisältämät tiedot. Hajautusoperaattorin jälkeen voimme säätää tai lisätä mitä tahansa ominaisuutta, jota haluamme muuttaa; meidän tapauksessamme lähteen sijainti ja tulosten sijainti.

Ominaisuus entrymäärittää lähdetiedostot, joka on oletuksena ./src/index.js. Jokainen entryomaisuuden merkintä on avain+arvo-pari, josta verkkopaketti kokoaa (ja katselee). Yllä olevassa esimerkissä olen määritellyt " block-mynamespace-myblock", joka sijaitsee src/block-mynamespace-myblock.jsyhdeksi tulopisteeksi. Voit lisätä tänne niin monta avain+arvo-paria jokaiselle käännettävälle lähdetiedostolle.

Omaisuus outputpäättää koottujen tiedostojen sijainnin. Määrität pathkohdekansion kaikille käännetyille tiedostoille. Käytän polun apuohjelmaa, jotta voin navigoida hakemistoissa oikein asetuksissani. Yllä olevassa esimerkissä kerron webpackille, että kaikkien koottujen tiedostojen tulee päätyä theme-folder/assets/js/gutenberg/kansiooni. Tärkeää on ../se, että käytän kävelemistä ylös hakemistopuussa, ulos projektikansiosta ja toiseen kansioon, jossa haluan kaikkien teemani Javascript-tiedostojen olevan. Säädä polku projektisi rakenteeseen sopivaksi.

Toiseksi kerron webpackille, että kaikki tiedostonimet tulee nimetä niitä vastaavina avaimeniminä entry. Tämä verkkopaketin konfiguraatio kääntää minun theme-folder/gutenberg-dev/src/block-mynamespace-myblock.jsosaksi theme-folder/assets/js/gutenberg/block-mynamespace-myblock.js. Jos lisäisin toisen lähdetiedoston avain+arvo -pariksi hakemistoon entry, se käännetään samaan kansioon, jossa avain on sen tiedostonimi.

Tee haluamasi muutokset webpack.config.jstiedostoon ja tallenna. Suorita mikä tahansa rakennuskomento uudelleen npmluodaksesi tiedostot niiden uusiin paikkoihin.

Se siitä! Olet nyt laajentanut WordPressin verkkopaketin konfiguraatiota ja hallitset nyt, minne lähde- ja tulostiedostosi pitäisi mennä.

Haluan kuitenkin sisällyttää tähän oppaaseen viimeisen vinkin. WordPressin Babelin oletuskonfiguraatiosta saattaa puuttua tiettyjä Babel-laajennuksia tiettyjä ESNextin uusia ominaisuuksia varten. Esimerkiksi yllä olevilla oletusasetuksella ja WordPressin oletusasetuksella et voi käyttää nuolifunktioita koodissasi. Jos tällä on sinulle merkitystä, lue.

Lisää tuki uusimmille ESNext-syntakseille Babelin kanssa

Kirjoitushetkellä tämän WordPressin Babel-oletusasetuksista puuttuu tuki "kokeellisille syntakseille", jotka sisältävät esimerkiksi nuolifunktioita. Jotta voit lisätä tähän tuen, sinun on toimitettava Babel-määritystiedostosi, enkä ole vielä löytänyt tapaa laajentaa WordPressin Babel-konfiguraatiota, kuten teimme yllä olevan webpack-määrityksen kanssa. Joten meidän on määritettävä uudelleen Babelin esiasetukset sekä lisättävä "kokeelliset syntaksit" -laajennus. Mutta älä huoli, se on hyvin pieni tiedosto.

Ensimmäinen vaihe on joidenkin Babel-esiasetusten tarvitsemien pakettien asentaminen – meidän on asennettava samat paketit, jotka on määritelty WordPressin Babel-kokoonpanossa. Suorita tämä komento asentaaksesi @babel/preset-envja @babel/preset-react, sekä paketin, josta olemme kiinnostuneita; @babel/plugin-proposal-class-properties:

npm install --save-dev @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties

Toinen vaihe on Babel-määritystiedoston lisääminen. Luo projektikansioosi tiedosto nimeltä .babelrc(ei tiedostopäätettä).

Huomautus Windowsille: Jos istut Windows-koneella, et voi luoda tiedostoja ilman tiedostotunnisteita. Voit kiertää tämän luomalla tämän tiedoston terminaalin/komentokehotteen avulla. Suorita tämä komento:

Tämä komento tulostaa "hi" .babelrcnykyisen kansion tiedostoon. Voit nyt avata tämän tiedoston editorissasi, poistaa "hi" ja lisätä todellisen sisällön alle.

Sinun .babelrcpitäisi näyttää jotain tältä:

{ "presets": ["@babel/preset-env", "@babel/preset-react"], "plugins": [ [ "@babel/plugin-proposal-class-properties" ] ] }

Määrittelemme samat esiasetukset kuin tavallisesti React-projektissa, ja samat kuin WordPress tekee sen. Se, mitä lisäämme, on pluginsomaisuus. pluginsLisäämme taulukon @babel/plugin-proposal-class-propertiessisään Babel-liitännäisen, joka on välttämätön "kokeellisille syntakseille", kuten nuolifunktioille.

Johtopäätös

Muista, että WordPress voi muuttaa kokoonpanoaan milloin tahansa, tämä on erityisen todennäköistä, koska Gutenberg on melko uusi. Koska laajennamme WordPressin kokoonpanoa, saatamme jossain vaiheessa joutua päivittämään kokoonpanomme uudelleen tarpeisiimme sopivaksi. Ehkä WordPress päättää sisällyttää tuen kokeellisille syntakseille, jotta meidän ei tarvitse tehdä koko Babelin määritystä.

Tämä ei suinkaan ole tyhjentävä opas Webpackin ja Babelin käyttöönotossa, vaan tulos on monien kokeilujen ja asioiden selvittämisen tulos. Toivottavasti tämä on auttanut sinua oppimaan perustamaan oman Gutenberg-kehitysympäristösi ja tehnyt siitä tarpeeksi helppoa, joten tämä ei ole niin suuri este ES6:n, ESNextin, JSX:n ja kaiken muun kehittämiseen hyödyllisen oppimisen aloittamiselle. Gutenberg!

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja