{"id":233872,"date":"2023-02-24T18:37:00","date_gmt":"2023-02-24T15:37:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233872"},"modified":"2022-11-11T12:54:56","modified_gmt":"2022-11-11T09:54:56","slug":"taeydellinen-opas-kehitysympaeristoen-luomiseen-gutenbergille","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/taeydellinen-opas-kehitysympaeristoen-luomiseen-gutenbergille\/","title":{"rendered":"T\u00e4ydellinen opas kehitysymp\u00e4rist\u00f6n luomiseen Gutenbergille"},"content":{"rendered":"\n

T\u00e4m\u00e4 opas on tarkoitettu sinulle, joka haluat kirjoittaa koodia Gutenbergille ES6-, ESNext- ja JSX-syntaksilla, ja sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 verkkopaketti ja babel muuntaaksesi ne tiedostoiksi, joita voit k\u00e4ytt\u00e4\u00e4 Gutenberg-editorissa. Katsomme, mit\u00e4 sinun on teht\u00e4v\u00e4, miksi ja kuinka voimme k\u00e4ytt\u00e4\u00e4 ja laajentaa WordPressin oletusasetuksia ja mukauttaa niit\u00e4 tarpeisiimme.<\/p>\n

Jos olet t\u00e4ysin uusi npm-, webpcak- ja Babel-konseptien suhteen, sinun tulee lukea seuraava osio, jonka tarkoituksena on selitt\u00e4\u00e4 n\u00e4iden ty\u00f6kalujen perusasiat ja kuinka k\u00e4yt\u00e4t niit\u00e4. Jos olet kuitenkin tehnyt t\u00e4m\u00e4n aiemmin ja olet perehtynyt prosessiin, ehk\u00e4 kehitt\u00e4m\u00e4ll\u00e4 Reactin avulla, siirry seuraavaan osioon, jossa me itse asiassa m\u00e4\u00e4rit\u00e4mme asiat.<\/p>\n

Aloittelijoille: npm, webpack ja babel<\/h2>\n

Jos et ole varma, miksi meid\u00e4n on teht\u00e4v\u00e4 kaikki t\u00e4m\u00e4 Javascriptin kirjoittamiseksi Gutenbergille, suosittelen, ett\u00e4 luet viestini<\/a>, joka k\u00e4sittelee Gutenbergin kehitt\u00e4misen perusteita \u2013 miss\u00e4 selit\u00e4n Javascript-versioiden erot ja miksi se vaivan arvoista.<\/p>\n

Jos et ole koskaan tehnyt t\u00e4t\u00e4 ennen, sinun on ensin asennettava Node.js<\/a> tietokoneellesi. Napsauta linkki\u00e4, lataa ja asenna se. Node.js:n mukana saat ty\u00f6kalun, jonka avulla m\u00e4\u00e4rit\u00e4mme suurimman osan m\u00e4\u00e4rityksist\u00e4. T\u00e4m\u00e4 ty\u00f6kalu on npm<\/code>, jonka avulla voit asentaa Javascript-kirjastoja ja suorittaa komentosarjoja komentorivin\/p\u00e4\u00e4tteen kautta. Voit vaihtoehtoisesti k\u00e4ytt\u00e4\u00e4 yarn<\/code>, jos haluat, mutta t\u00e4ss\u00e4 oppaassa k\u00e4yt\u00e4mme npm<\/code>.<\/p>\n

npm<\/h3>\n

T\u00e4ss\u00e4 oppaassa ei k\u00e4sitell\u00e4 yksityiskohtaisesti kaikkia asioita, joita voit tehd\u00e4 npm<\/code>, mutta se selitt\u00e4\u00e4 sen perusk\u00e4sitteen ja asioita, jotka ovat merkityksellisi\u00e4 tarkoituksiin. K\u00e4yt\u00e4mme npm<\/code>kahteen asiaan; tarvittavien kirjastojen asentamiseen projektiimme ja komentojen suorittamiseen Javascript-tiedostojemme rakentamiseksi (k\u00e4\u00e4nt\u00e4miseksi).<\/p>\n

npm<\/code>Voit asentaa mit\u00e4 tahansa julkisia avoimen l\u00e4hdekoodin Javascript-paketteja. Jos kehit\u00e4mme Reactin kanssa (WordPressin ulkopuolella), meid\u00e4n on asennettava React-kirjastot ja verkkopakettikirjastot. WordPress tarjoaa laajan valikoiman kirjastoja (p\u00e4\u00e4asiassa Gutenbergille), jotka voit asentaa, mutta olemme todella kiinnostuneita vain yhdest\u00e4: @wordpress\/scripts<\/code>\u2013 joka auttaa meit\u00e4 yksinkertaistamaan m\u00e4\u00e4rityksi\u00e4mme.<\/p>\n

Aina kun asennat kirjaston, npm<\/code>se luo alikansion " node_modules<\/code>", johon asennetut kirjastot on tallennettu. Sinun ei koskaan tarvitse kirjoittaa t\u00e4h\u00e4n kansioon tai muuttaa t\u00e4\u00e4ll\u00e4 mit\u00e4\u00e4n, mutta muista, ett\u00e4 t\u00e4m\u00e4 kansio sis\u00e4lt\u00e4\u00e4 helposti (kirjaimellisesti!) kymmeni\u00e4 tuhansia T\u00e4m\u00e4 on kansio, jota sinun ei pit\u00e4isi koskaan sitoutua gitiin tai sis\u00e4llytt\u00e4\u00e4 mihink\u00e4\u00e4n valmiiseen teemaan tai laajennukseen. Kirjastoja tarvitaan vain kehitett\u00e4ess\u00e4.<\/p>\n

Kun ymp\u00e4rist\u00f6si on m\u00e4\u00e4ritetty, voit k\u00e4ytt\u00e4\u00e4 npm<\/code>sit\u00e4 tiedostossasi m\u00e4\u00e4ritettyjen komentosarjojen suorittamiseen package.json<\/code>. Projektista riippuen sinulla on yleens\u00e4 v\u00e4hint\u00e4\u00e4n kaksi komentosarjaa; yksi skriptien rakentamiseen ja toinen "katselutilan" k\u00e4ynnist\u00e4miseen. "Katsotilassa" npm<\/code>k\u00e4ynnist\u00e4\u00e4 p\u00e4\u00e4tteess\u00e4 prosessin, joka odottaa ja kuuntelee mihin tahansa tiedostoon tehtyj\u00e4 muutoksia ja kokoaa ne ajon aikana aina, kun painat Tallenna-painiketta. Saatat tuntea t\u00e4m\u00e4n k\u00e4sitteen, jos olet aiemmin k\u00e4ytt\u00e4nyt SCSS- tai LESS-k\u00e4\u00e4nt\u00e4j\u00e4ohjelmia. On paljon tehokkaampaa ajaa taustalla "katso"-skripti, joka k\u00e4\u00e4nnet\u00e4\u00e4n uudelleen joka kerta, kun tallennat, sen sijaan, ett\u00e4 menisi terminaaliin ja suorita koontikomento jokaisen muutoksen j\u00e4lkeen.<\/p>\n

webpack ja babel<\/h3>\n

Voit hankkia kehitt\u00e4m\u00e4ll\u00e4 Gutenbergille ilman webpack- tai babel-konfigurointia. Koska k\u00e4yt\u00e4mme WordPressin kirjastoja, he hoitavat sen puolestamme. T\u00e4ll\u00e4 on kuitenkin yksi haittapuoli – se on oletuksena kiinte\u00e4 sijainti ja tiedostonimi sek\u00e4 l\u00e4hde- ett\u00e4 tulostiedostoille. Koko Javascript-kehitys on kirjoitettava yhteen tiedostoon, project-folder\/src\/index.js<\/code>ja koontiversio p\u00e4\u00e4tyy aina tiedostoon project-folder\/build\/index.js<\/code>. Jos t\u00e4m\u00e4 sopii sinulle, voit ohittaa koko verkkopaketin m\u00e4\u00e4ritt\u00e4mist\u00e4 koskevan osan. Jos olet kuitenkin kehitt\u00e4m\u00e4ss\u00e4 teemaa tai laajennusta, jossa on useita Gutenberg-ominaisuuksia (mukautettuja lohkoja, suodattimia jne.), saatat haluta ainakin eri tulostiedostonimen ja -sijainnin sek\u00e4 sallia useiden tiedostojen k\u00e4yt\u00f6n.<\/p>\n

Jos k\u00e4yt\u00e4t WordPress-pakettia asennukseen (@wordpress\/scripts<\/code>), Babel on jo m\u00e4\u00e4ritetty. Mutta sinun tulee olla tietoinen siit\u00e4, ett\u00e4 WordPress-paketti ei v\u00e4ltt\u00e4m\u00e4tt\u00e4 sis\u00e4ll\u00e4 laajennuksia, joita saatat haluta k\u00e4ytt\u00e4\u00e4. Siell\u00e4 on esimerkiksi paketti, jonka avulla voit k\u00e4ytt\u00e4\u00e4 uusia ns. "nuolifunktioita" (myFunction = (param) => { }<\/code>) funktioiden m\u00e4\u00e4ritt\u00e4miseen ilman sidontaa this<\/code>. Jos haluat ehdottomasti k\u00e4ytt\u00e4\u00e4 n\u00e4it\u00e4 ESNext-ominaisuuksia, sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 Babel itse sen sijaan, ett\u00e4 k\u00e4yt\u00e4t WordPressin oletusasetuksia. K\u00e4yn l\u00e4pi miten alla.<\/p>\n

Prosessi<\/h3>\n

Webpack-kehitysprosessi, kun kaikki on asennettu ja asennettu, on navigoida projektikansioon terminaalissa ja k\u00e4ynnist\u00e4\u00e4 "katso"-skripti. Se pysyy auki ja kuuntelee JS-tiedostoihisi tehtyj\u00e4 muutoksia. Aina kun painat Javascript-tiedostoissasi Tallenna-painiketta, p\u00e4\u00e4te antaa (toivottavasti) tiedon, ett\u00e4 se on k\u00e4\u00e4nnetty uudelleen onnistuneesti. Jos k\u00e4\u00e4nn\u00f6svirheit\u00e4 oli, ne n\u00e4kyv\u00e4t p\u00e4\u00e4tteess\u00e4. Pys\u00e4yt\u00e4 "katselu" painamalla CTRL + C.<\/p>\n

Ymp\u00e4rist\u00f6n j\u00e4rjest\u00e4minen<\/h2>\n

Oletan, ett\u00e4 sinulla on jo paikallinen WordPress, joka on k\u00e4ynniss\u00e4 jossain LAMP-pinossa (ohjelmat, kuten WampServer, XAMPP, Docker tai vastaavat), ja ett\u00e4 sinulla on joko laajennus tai teema valmiina Javascriptin koodaamiseen.<\/p>\n

Suosittelen luomaan Javascriptin kehitt\u00e4miseen omistetun alikansion, koska saatat p\u00e4\u00e4ty\u00e4 useisiin asetustiedostoihin ja kansioihin. T\u00e4m\u00e4 helpottaa tiedostojen ja kansioiden (esimerkiksi node_modules\/<\/code>) erottamista, joita et halua sis\u00e4llytt\u00e4\u00e4 git-toimituksiin tai lopullisiin koontiversioihin. Mutta on t\u00e4ysin hienoa k\u00e4ytt\u00e4\u00e4 p\u00e4\u00e4teemaa tai laajennuskansiota projektikansiona Javascriptin kehitt\u00e4miseen.<\/p>\n

Siirry p\u00e4\u00e4tteess\u00e4 (Mac OS -p\u00e4\u00e4te tai Windowsin komentokehote toimivat hyvin) projektikansioon. Mit\u00e4 tulee t\u00e4h\u00e4n opetusohjelmaan, oletan, ett\u00e4 olemme teemassa ja olemme luoneet tyhj\u00e4n alikansion gutenberg-dev\/<\/code>projektikansioksemme.<\/p>\n

Ensimm\u00e4inen askel on npm-projektin alustaminen – mik\u00e4 periaatteessa vain k\u00e4skee npm<\/code>luoda package.json<\/code>tiedoston. T\u00e4m\u00e4 package.json<\/code>tiedosto kertoo npm<\/code>, mit\u00e4 paketteja tarvitaan ja mit\u00e4 komentosarjoja on k\u00e4ytett\u00e4viss\u00e4. Kirjoita t\u00e4m\u00e4 terminaaliin;<\/p>\n

npm init -y<\/code><\/pre>\n
T\u00e4m\u00e4 luo package.json<\/code>tiedoston oletussis\u00e4ll\u00f6ll\u00e4 projektikansioosi.<\/p>\n
Seuraavaksi asennamme WordPress-paketin, joka auttaa meit\u00e4 v\u00e4hent\u00e4m\u00e4\u00e4n tarvittavien m\u00e4\u00e4ritysten m\u00e4\u00e4r\u00e4\u00e4. Suorita t\u00e4m\u00e4 komento:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Tunniste --save-dev<\/code>ilmoittaa npm<\/code>, ett\u00e4 annetut kirjastot ovat v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4 vain kehityst\u00e4 varten, ja --save-exact<\/code>varmistaa, ett\u00e4 npm<\/code>vain yksi versio, uusin, asennetaan.<\/p>\n
Avaa package.json<\/code>tiedosto editorissasi. (npm<\/code>on my\u00f6s luonut package-lock.json<\/code>paketteja asennuksen yhteydess\u00e4, voit j\u00e4tt\u00e4\u00e4 t\u00e4m\u00e4n tiedoston huomioimatta, package.json<\/code>teet siihen muutoksia). Sen pit\u00e4isi olla t\u00e4ytetty oletuskokoonpanolla, ja saatat huomata, ett\u00e4 aiemmin tekem\u00e4mme paketin asennus lis\u00e4si @wordpress\/scripts<\/code>tietyn version merkinn\u00e4n devDependencies<\/code>. Kun asennat lis\u00e4\u00e4 paketteja, npm<\/code>p\u00e4ivitet\u00e4\u00e4n package.json<\/code>kunkin paketin merkinn\u00f6ill\u00e4. T\u00e4ss\u00e4 tiedostossa meid\u00e4n on huolehdittava vain scripts<\/code>ominaisuuksista, jotka ovat skriptej\u00e4 (komentoja), joita voit k\u00e4ytt\u00e4\u00e4 npm<\/code>suorittamaan. P\u00e4ivit\u00e4 komentosarja-ominaisuus t\u00e4h\u00e4n (voit poistaa oletusarvoisen "testin"):<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
T\u00e4m\u00e4 koodinp\u00e4tk\u00e4 kertoo npm<\/code>, ett\u00e4 meill\u00e4 on kaksi skripti\u00e4, joita voimme ajaa t\u00e4ss\u00e4 projektikansiossa; "rakenna" ja "aloita". Suoritamme komentosarjan komennolla npm run <scriptname><\/code>, joka npm<\/code>etsii package.json<\/code>ja suorittaa sen arvoksi m\u00e4\u00e4ritellyn komennon. K\u00e4yt\u00e4mme wp-scripts<\/code>juuri asentamamme paketin mukana tullutta ty\u00f6kalua joko k\u00e4\u00e4nt\u00e4m\u00e4\u00e4n Javascriptin kerran (\"build\"<\/code>) tai k\u00e4ynnist\u00e4m\u00e4\u00e4n "katso" \/ "kuuntele" -tilan k\u00e4\u00e4nt\u00e4\u00e4ksemme aina, kun tallennamme muutokset (\"start\"<\/code>).<\/p>\n
T\u00e4m\u00e4 mahdollistaa my\u00f6s WordPressin verkkopaketin ja Babel-konfiguroinnin k\u00e4yt\u00f6n, joten meid\u00e4n ei tarvitse tehd\u00e4 sit\u00e4 itse.<\/p>\n
Luo projektikansioosi alikansio nimelt\u00e4 src\/<\/code>. Luo t\u00e4m\u00e4n kansion sis\u00e4ll\u00e4 index.js<\/code>tiedosto.<\/p>\n
Jos verkkopaketin oletusasetukset ovat kunnossa, olet nyt valmis! Kirjoita ES6- ja JSX-koodisi sis\u00e4\u00e4n index.js<\/code>ja k\u00e4ske npm<\/code>k\u00e4\u00e4nt\u00e4\u00e4 ne joko suorittamalla build-komento:<\/p>\n
npm run build<\/code><\/pre>\n
tai k\u00e4ynnist\u00e4 "katselu"-prosessi terminaalissa, joka kuuntelee t\u00e4ll\u00e4 komennolla tehtyj\u00e4 muutoksia (katsominen lopetetaan painamalla CTRL+C):<\/p>\n
npm run start<\/code><\/pre>\n
Jos suoritat jommankumman n\u00e4ist\u00e4, projektisi hakemistoon luodaan build\/<\/code>alikansio, jossa on k\u00e4\u00e4nnetty tulos build\/index.js<\/code>.<\/p>\n
Siin\u00e4 kaikki perusymp\u00e4rist\u00f6n asennukseen! Olet nyt valmis kirjoittamaan ES6 Javascriptin Gutenbergille!<\/strong><\/p>\n
Jos haluat muuttaa l\u00e4hde- tai tulostiedostojesi sijaintia ja tiedostonimi\u00e4, lue eteenp\u00e4in.<\/p>\n
L\u00e4hde- ja tulostiedostojen nimien ja polkujen m\u00e4\u00e4ritt\u00e4minen<\/h3>\n
Jos et, kuten min\u00e4, ole tyytyv\u00e4inen oletustiedostonimeen ja -rakenteeseen \u2013 etenk\u00e4\u00e4n tulostiedostojen osalta, sinun on tutkittava verkkopaketin konfigurointia. Normaalisti, jos esimerkiksi kehitit Reactille WordPressin ulkopuolella, sinun on m\u00e4\u00e4ritett\u00e4v\u00e4 t\u00e4ydellinen verkkopakettikokoonpano Babel-laajennuksella. Onneksi WordPress huolehtii t\u00e4st\u00e4 puolestamme ja antaa meille mahdollisuuden laajentaa WordPressin omaa verkkopaketin konfiguraatiota ja s\u00e4\u00e4t\u00e4\u00e4 vain niit\u00e4 osia, joita haluamme muuttaa.<\/p>\n
Luo projektikansioosi (sama kansio kuin package.json<\/code>) tiedosto nimelt\u00e4 webpack.config.js<\/code>ja avaa se editorissasi. Kirjoita t\u00e4h\u00e4n tiedostoon seuraava:<\/p>\n
const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\nconst path = require('path');\nmodule.exports = {\n    ...defaultConfig,\n    entry: {\n        'block-mynamespace-myblock': '.\/src\/block-mynamespace-myblock.js'\n    },\n    output: {\n        path: path.join(__dirname, '..\/assets\/js\/gutenberg'),\n        filename: '[name].js'\n    }\n}<\/code><\/pre>\n
Ensimm\u00e4inen asia, jonka teemme, on noutaa @wordpress\/scripts<\/code>verkkopaketin konfiguraatio muuttujaan defaultConfig<\/code>. Webpack-kokoonpanon sis\u00e4ll\u00e4 module.exports<\/code>ensimm\u00e4inen asia, jonka teemme, on soveltaa kaikkea levitysoperaattorilla defaultConfig<\/code>( ...<\/code>). N\u00e4m\u00e4 kaksi osaa varmistavat, ett\u00e4 laajennamme WordPressin verkkopaketin konfiguraatiota sis\u00e4llytt\u00e4m\u00e4ll\u00e4 kaikki sen sis\u00e4lt\u00e4m\u00e4t tiedot. Hajautusoperaattorin j\u00e4lkeen voimme s\u00e4\u00e4t\u00e4\u00e4 tai lis\u00e4t\u00e4 mit\u00e4 tahansa ominaisuutta, jota haluamme muuttaa; meid\u00e4n tapauksessamme l\u00e4hteen sijainti ja tulosten sijainti.<\/p>\n
Ominaisuus entry<\/code>m\u00e4\u00e4ritt\u00e4\u00e4 l\u00e4hdetiedostot, joka on oletuksena .\/src\/index.js<\/code>. Jokainen entry<\/code>omaisuuden merkint\u00e4 on avain+arvo-pari, josta verkkopaketti kokoaa (ja katselee). Yll\u00e4 olevassa esimerkiss\u00e4 olen m\u00e4\u00e4ritellyt " block-mynamespace-myblock<\/code>", joka sijaitsee src\/block-mynamespace-myblock.js<\/code>yhdeksi tulopisteeksi. Voit lis\u00e4t\u00e4 t\u00e4nne niin monta avain+arvo-paria jokaiselle k\u00e4\u00e4nnett\u00e4v\u00e4lle l\u00e4hdetiedostolle.<\/p>\n
Omaisuus output<\/code>p\u00e4\u00e4tt\u00e4\u00e4 koottujen tiedostojen sijainnin. M\u00e4\u00e4rit\u00e4t path<\/code>kohdekansion kaikille k\u00e4\u00e4nnetyille tiedostoille. K\u00e4yt\u00e4n polun apuohjelmaa, jotta voin navigoida hakemistoissa oikein asetuksissani. Yll\u00e4 olevassa esimerkiss\u00e4 kerron webpackille, ett\u00e4 kaikkien koottujen tiedostojen tulee p\u00e4\u00e4ty\u00e4 theme-folder\/assets\/js\/gutenberg\/<\/code>kansiooni. T\u00e4rke\u00e4\u00e4 on ..\/<\/code>se, ett\u00e4 k\u00e4yt\u00e4n k\u00e4velemist\u00e4 yl\u00f6s hakemistopuussa, ulos projektikansiosta ja toiseen kansioon, jossa haluan kaikkien teemani Javascript-tiedostojen olevan. S\u00e4\u00e4d\u00e4 polku projektisi rakenteeseen sopivaksi.<\/p>\n
Toiseksi kerron webpackille, ett\u00e4 kaikki tiedostonimet tulee nimet\u00e4 niit\u00e4 vastaavina avaimenimin\u00e4 entry<\/code>. T\u00e4m\u00e4 verkkopaketin konfiguraatio k\u00e4\u00e4nt\u00e4\u00e4 minun theme-folder\/gutenberg-dev\/src\/block-mynamespace-myblock.js<\/code>osaksi theme-folder\/assets\/js\/gutenberg\/block-mynamespace-myblock.js<\/code>. Jos lis\u00e4isin toisen l\u00e4hdetiedoston avain+arvo -pariksi hakemistoon entry<\/code>, se k\u00e4\u00e4nnet\u00e4\u00e4n samaan kansioon, jossa avain on sen tiedostonimi.<\/p>\n
Tee haluamasi muutokset webpack.config.js<\/code>tiedostoon ja tallenna. Suorita mik\u00e4 tahansa rakennuskomento uudelleen npm<\/code>luodaksesi tiedostot niiden uusiin paikkoihin.<\/p>\n
Se siit\u00e4! Olet nyt laajentanut WordPressin verkkopaketin konfiguraatiota ja hallitset nyt, minne l\u00e4hde- ja tulostiedostosi pit\u00e4isi menn\u00e4.<\/strong><\/p>\n
Haluan kuitenkin sis\u00e4llytt\u00e4\u00e4 t\u00e4h\u00e4n oppaaseen viimeisen vinkin. WordPressin Babelin oletuskonfiguraatiosta saattaa puuttua tiettyj\u00e4 Babel-laajennuksia tiettyj\u00e4 ESNextin uusia ominaisuuksia varten. Esimerkiksi yll\u00e4 olevilla oletusasetuksella ja WordPressin oletusasetuksella et voi k\u00e4ytt\u00e4\u00e4 nuolifunktioita koodissasi. Jos t\u00e4ll\u00e4 on sinulle merkityst\u00e4, lue.<\/p>\n
Lis\u00e4\u00e4 tuki uusimmille ESNext-syntakseille Babelin kanssa<\/h3>\n
Kirjoitushetkell\u00e4 t\u00e4m\u00e4n WordPressin Babel-oletusasetuksista puuttuu tuki "kokeellisille syntakseille", jotka sis\u00e4lt\u00e4v\u00e4t esimerkiksi nuolifunktioita. Jotta voit lis\u00e4t\u00e4 t\u00e4h\u00e4n tuen, sinun on toimitettava Babel-m\u00e4\u00e4ritystiedostosi, enk\u00e4 ole viel\u00e4 l\u00f6yt\u00e4nyt tapaa laajentaa WordPressin Babel-konfiguraatiota, kuten teimme yll\u00e4 olevan webpack-m\u00e4\u00e4rityksen kanssa. Joten meid\u00e4n on m\u00e4\u00e4ritett\u00e4v\u00e4 uudelleen Babelin esiasetukset sek\u00e4 lis\u00e4tt\u00e4v\u00e4 "kokeelliset syntaksit" -laajennus. Mutta \u00e4l\u00e4 huoli, se on hyvin pieni tiedosto.<\/p>\n
Ensimm\u00e4inen vaihe on joidenkin Babel-esiasetusten tarvitsemien pakettien asentaminen \u2013 meid\u00e4n on asennettava samat paketit, jotka on m\u00e4\u00e4ritelty WordPressin Babel-kokoonpanossa. Suorita t\u00e4m\u00e4 komento asentaaksesi @babel\/preset-env<\/code>ja @babel\/preset-react<\/code>, sek\u00e4 paketin, josta olemme kiinnostuneita; @babel\/plugin-proposal-class-properties<\/code>:<\/p>\n
npm install --save-dev @babel\/preset-env @babel\/preset-react @babel\/plugin-proposal-class-properties<\/code><\/pre>\n
Toinen vaihe on Babel-m\u00e4\u00e4ritystiedoston lis\u00e4\u00e4minen. Luo projektikansioosi tiedosto nimelt\u00e4 .babelrc<\/code>(ei tiedostop\u00e4\u00e4tett\u00e4).<\/p>\n
Huomautus Windowsille: Jos istut Windows-koneella, et voi luoda tiedostoja ilman tiedostotunnisteita. Voit kiert\u00e4\u00e4 t\u00e4m\u00e4n luomalla t\u00e4m\u00e4n tiedoston terminaalin\/komentokehotteen avulla. Suorita t\u00e4m\u00e4 komento:<\/p>\n
echo hi > .babelrc<\/code><\/pre>\n
T\u00e4m\u00e4 komento tulostaa "hi" .babelrc<\/code>nykyisen kansion tiedostoon. Voit nyt avata t\u00e4m\u00e4n tiedoston editorissasi, poistaa "hi" ja lis\u00e4t\u00e4 todellisen sis\u00e4ll\u00f6n alle.<\/p>\n
Sinun .babelrc<\/code>pit\u00e4isi n\u00e4ytt\u00e4\u00e4 jotain t\u00e4lt\u00e4:<\/p>\n
{\n    \"presets\": [\"@babel\/preset-env\", \"@babel\/preset-react\"],\n    \"plugins\": [\n        [\n            \"@babel\/plugin-proposal-class-properties\"\n        ]\n    ]\n}<\/code><\/pre>\n
M\u00e4\u00e4rittelemme samat esiasetukset kuin tavallisesti React-projektissa, ja samat kuin WordPress tekee sen. Se, mit\u00e4 lis\u00e4\u00e4mme, on plugins<\/code>omaisuus. plugins<\/code>Lis\u00e4\u00e4mme taulukon @babel\/plugin-proposal-class-properties<\/code>sis\u00e4\u00e4n Babel-liit\u00e4nn\u00e4isen, joka on v\u00e4ltt\u00e4m\u00e4t\u00f6n "kokeellisille syntakseille", kuten nuolifunktioille.<\/p>\n
Johtop\u00e4\u00e4t\u00f6s<\/h2>\n
Muista, ett\u00e4 WordPress voi muuttaa kokoonpanoaan milloin tahansa, t\u00e4m\u00e4 on erityisen todenn\u00e4k\u00f6ist\u00e4, koska Gutenberg on melko uusi. Koska laajennamme WordPressin kokoonpanoa, saatamme jossain vaiheessa joutua p\u00e4ivitt\u00e4m\u00e4\u00e4n kokoonpanomme uudelleen tarpeisiimme sopivaksi. Ehk\u00e4 WordPress p\u00e4\u00e4tt\u00e4\u00e4 sis\u00e4llytt\u00e4\u00e4 tuen kokeellisille syntakseille, jotta meid\u00e4n ei tarvitse tehd\u00e4 koko Babelin m\u00e4\u00e4rityst\u00e4.<\/p>\n
T\u00e4m\u00e4 ei suinkaan ole tyhjent\u00e4v\u00e4 opas Webpackin ja Babelin k\u00e4ytt\u00f6\u00f6notossa, vaan tulos on monien kokeilujen ja asioiden selvitt\u00e4misen tulos. Toivottavasti t\u00e4m\u00e4 on auttanut sinua oppimaan perustamaan oman Gutenberg-kehitysymp\u00e4rist\u00f6si ja tehnyt siit\u00e4 tarpeeksi helppoa, joten t\u00e4m\u00e4 ei ole niin suuri este ES6:n, ESNextin, JSX:n ja kaiken muun kehitt\u00e4miseen hy\u00f6dyllisen oppimisen aloittamiselle. Gutenberg!<\/p>\n
:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
T\u00e4m\u00e4 on t\u00e4ydellinen opas npm-, webpack- ja babel-asetusten m\u00e4\u00e4ritt\u00e4miseen Gutenbergin koodin kirjoittamiseksi ES6-, ESNext- ja JSX-syntakseilla.<\/p>\n","protected":false},"author":1,"featured_media":151834,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[938,938,813,917,917,1110,834,843,813,834,843,864,864],"tags":[1166],"class_list":["post-233872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-gutenberg-5","category-laajennuksia","category-muut","category-n-a","category-opas-aloittelijoille","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=233872"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/233872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/151834"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=233872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=233872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=233872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}