Täielik juhend Gutenbergi arenduskeskkonna seadistamiseks

See juhend on mõeldud teile, kes soovite kirjutada Gutenbergi koodi ES6, ESNexti ja JSX süntaksiga ning peate seadistama veebipaketi ja babeli, et muuta need failideks, mida saate kasutada Gutenbergi redaktoris. Vaatame, mida peate tegema, miks ja kuidas saame kasutada ja laiendada WordPressi vaikeseadeid ning kohandada neid vastavalt meie vajadustele.

Kui olete npm, webpcak ja Babeli kontseptsioonides täiesti uus, peaksite lugema järgmist jaotist, mille eesmärk on selgitada nende tööriistade tööpõhimõtteid ja nende kasutamist. Kui aga olete seda varem teinud ja olete protsessiga tuttav, võib-olla Reactiga arendades, minge edasi järgmise jaotise juurde, kus me tegelikult asjad paika paneme.

Algajatele: npm, webpack ja babel

Kui te pole kindel, miks peame Gutenbergi jaoks Javascripti kirjutamiseks seda kõike tegema, soovitan teil lugeda minu postitust, mis uurib Gutenbergi jaoks arendamise põhitõdesid – kus ma selgitan Javascripti versioonide erinevust ja miks see vaeva väärt on.

Kui te pole seda kunagi varem teinud, peate esmalt installima Node.js oma arvutisse. Klõpsake linki, laadige see alla ja installige. Node.js sisaldab tööriista, mida kasutame enamiku konfiguratsioonide seadistamiseks. See tööriist on npm, mis võimaldab installida Javascripti teeke ja käivitada skripte käsurea / terminali kaudu. Soovi korral võite ka kasutada yarn, kuid selle juhendi jaoks kasutame npm.

npm

Selles juhendis ei käsitleta üksikasjalikult kõiki asju, mida saate teha npm, kuid see selgitab selle põhikontseptsiooni ja asju, mis on meie eesmärkide jaoks olulised. Kasutame npmkahe asja jaoks; meie projekti vajalike teekide installimiseks ja Javascripti failide koostamiseks (kompileerimiseks) käskude käivitamiseks.

npmSaate installida mis tahes avaliku avatud lähtekoodiga Javascripti pakette. Kui peaksime arendama Reactiga (väljaspool WordPressi), peaksime installima Reacti teegid ja veebipaketi teegid. WordPress pakub tervet valikut teeke (peamiselt Gutenbergi jaoks), mida saate installida, kuid meid huvitab tegelikult ainult üks: @wordpress/scripts– mis aitab meil konfigureerimist lihtsustada.

Teegi installimisel npmloob alamkausta " node_modules", kuhu on salvestatud installitud teegid. Te ei pea kunagi sellesse kausta sisestama ega siin midagi muutma, kuid pidage meeles, et see kaust sisaldab hõlpsasti (sõna otseses mõttes!) kümneid tuhandeid See on kaust, mida te ei tohiks kunagi siduda gitiga ega kaasata valmis teemasse või pistikprogrammi. Teeke on vaja ainult arendamise ajal.

Kui teie keskkond on seadistatud, saate seda kasutada failis npmmääratletud skriptide käitamiseks. package.jsonOlenevalt projektist on teil tavaliselt vähemalt kaks skripti; üks skriptide koostamiseks ja teine ​​vaatamisrežiimi käivitamiseks. Vaatamisrežiimis npmkäivitab terminalis protsess, mis ootab ja kuulab suvalises failis tehtud muudatusi ning kompileerib need käitamisajal alati, kui vajutate nuppu Salvesta. Võib-olla olete selle kontseptsiooniga tuttav, kui olete varem kasutanud SCSS-i või LESS-i kompilaatorprogramme. Palju tõhusam on käivitada taustal jälgimisskript, mis kompileerub uuesti iga kord, kui salvestate, selle asemel, et minna terminali ja käivitada pärast iga muudatust build käsk.

veebipakk ja paabel

Selle saate Gutenbergi jaoks arendades ilma veebipakke või Babeli konfiguratsiooni tegemata. Kuna me kasutame WordPressi teeke, tegelevad nad sellega meie eest. Sellel on aga üks puudus – nii lähte- kui ka väljundfailide jaoks on vaikimisi kindel asukoht ja failinimi. Kogu teie Javascripti arendus tuleb kirjutada ühte faili, project-folder/src/index.jsja järg jõuab alati faili project-folder/build/index.js. Kui see teile sobib, võite kogu veebipaketi seadistamise osa vahele jätta. Kui aga arendate mitme Gutenbergi funktsiooniga (kohandatud plokid, filtrid jne) teemat või pistikprogrammi, võiksite vähemalt soovida teistsugust väljundfaili nime ja asukohta, samuti mitme faili lubamist.

Kui kasutate seadistamiseks WordPressi paketti (@wordpress/scripts), on Babel juba seadistatud. Kuid peaksite teadma, et WordPressi pakett ei pruugi sisaldada pistikprogramme, mida võiksite kasutada. Näiteks on olemas pakett, mis võimaldab kasutada uusi nn noolefunktsioone (myFunction = (param) => { }) funktsioonide määratlemiseks ilma sidumiseta this. Kui soovite kindlasti neid ESNexti funktsioone kasutada, peate WordPressi vaikeseadete kasutamise asemel Babeli ise konfigureerima. Ma käsitlen allpool, kuidas.

Protsess

Veebipaketiga arendamise protsess, kui kõik on seadistatud ja installitud, on navigeerida terminalis oma projekti kausta ja käivitada vaatamisskript. See jääb avatuks ja kuulab teie JS-failides tehtud muudatusi. Iga kord, kui vajutate Javascripti failides nuppu Salvesta, väljastab terminal (loodetavasti) teabe, et see on faili edukalt uuesti kompileerinud. Kui kompileerimisel oli vigu, kuvatakse need terminalis. Vaatamisprotsessi peatamiseks vajutage klahvikombinatsiooni CTRL + C.

Keskkonna seadistamine

Eeldan, et teil on juba kohalik WordPress, mis töötab mõnes LAMP-i virnas (näiteks WampServer, XAMPP, Docker või sarnased programmid) ja teil on Javascripti kodeerimiseks valmis pistikprogramm või teema.

Soovitan luua Javascripti arendamiseks pühendatud alamkausta, kuna teil võib olla mitu konfiguratsioonifaili ja kausta. See muudab failide ja kaustade (näiteks node_modules/) eraldamise lihtsamaks, mida te ei soovi lisada git commit-i või lõplikesse ehitustesse. Kuid on täiesti hea kasutada oma põhiteema või pistikprogrammi kausta Javascripti arendamiseks projektikaustana.

Navigeerige terminalis (Mac OS-i terminal või Windowsi käsuviip töötavad hästi) oma projektikausta. Mis puudutab seda õpetust, siis eeldan, et oleme teemas ja oleme gutenberg-dev/oma projektikaustaks loonud tühja alamkausta.

Esimene samm on npm-projekti lähtestamine – mis põhimõtteliselt käseb lihtsalt faili npmgenereerida. package.jsonSee package.jsonfail annab npmteada, milliseid pakette on vaja ja millised skriptid on töötamiseks saadaval. Sisestage see terminali;

npm init -y

See loob package.jsonteie projektikaustas vaikesisuga faili.

Järgmisena installime WordPressi paketi, mis aitab meil vähendada konfiguratsiooni hulka, mida peame tegema. Käivitage see käsk:

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

Märgis --save-devteavitab npm, et antud teegid on vajalikud ainult arenduseks, ning --save-exacttagab, et npminstallitakse ainult üks versioon, uusim.

Avage package.jsonfail oma redaktoris. (npmon ka package-lock.jsonpakettide installimisel genereerinud a, võid seda faili lihtsalt ignoreerida, selles package.jsonteete muudatusi). See peaks olema täidetud vaikekonfiguratsiooniga ja võite märgata, et paketi installimine, mille me varem tegime, lisas @wordpress/scriptsteatud versiooni kirje devDependencies. Kui installite rohkem pakette, npmvärskendatakse package.jsoniga paketi kirjetega. Kõik, mille pärast peame selles failis muretsema, on scriptsatribuut, mis on mõeldud skriptide (käskude) jaoks, mida saate npmkäivitamiseks kasutada. Värskendage skriptide atribuuti sellesse (saate vaiketesti eemaldada):

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

See koodilõik ütleb npm, et meil on kaks skripti, mida saame selles projektikaustas käivitada; "Ehita" ja "Alusta". Käivitame skripti käsuga npm run <scriptname>, mis npmotsib sisse package.jsonja täidab selle väärtusena määratletud käsu. Kasutame wp-scriptsäsja installitud paketiga kaasas olnud tööriista, et kas üks kord oma Javascripti kompileerida ("build") või käivitada vaatamis-/kuulamisrežiim, et kompileerida muudatuste salvestamisel ("start").

See võimaldab meil kasutada ka WordPressi veebipaketti ja Babeli konfiguratsiooni, nii et me ei pea seda ise tegema.

Looge oma projektikaustas alamkaust nimega src/. Looge selle kausta sees index.jsfail.

Kui olete veebipaketi vaikeseadetega korras, olete nüüd valmis! Kirjutage oma ES6 ja JSX kood sisse ja paluge index.jsneed npmkompileerida, käivitades kas ehituskäskluse:

npm run build

või käivitage terminalis jälgimisprotsess, mis kuulab selle käsuga tehtud muudatusi (vaatamisprotsessi peatamiseks kasutage CTRL+C):

npm run start

Kummagi neist käivitamine loob build/teie projekti kataloogis alamkausta koos kompileeritud tulemusega build/index.js.

See on kõik kõige elementaarsema keskkonna seadistuse jaoks! Olete nüüd valmis kirjutama ES6 Javascripti Gutenbergi jaoks!

Kui soovite muuta oma lähte- või väljundfailide asukohta ja failinimesid, lugege edasi.

Lähte- ja väljundfailinimede ja -teede seadistamine

Kui te, nagu mina, ei ole rahul vaikefailinime ja -struktuuriga – eriti väljundfaili(de) puhul, peate uurima veebipaketi konfigureerimist. Tavaliselt, näiteks kui arendate Reacti jaoks väljaspool WordPressi, peaksite Babeli pistikprogrammiga seadistama täieliku veebipaketi konfiguratsiooni. Õnneks hoolitseb WordPress selle eest meie eest ja võimaldab meil laiendada WordPressi enda veebipaketi konfiguratsiooni ja kohandada ainult neid osi, mida soovime muuta.

Looge oma projekti kaustas (sama kaustaga package.json) fail nimega webpack.config.jsja avage see oma redaktoris. Kirjutage sellesse faili järgmine tekst:

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'
    }
}

Esimene asi, mida me teeme @wordpress/scripts, on veebipaketi konfiguratsiooni toomine muutujasse defaultConfig. module.exportsVeebipaketi konfiguratsioonis rakendame esimese asjana kõike defaultConfig, kasutades levitusoperaatorit (...). Need kaks osa tagavad, et laiendaksime WordPressi veebipaketi konfiguratsiooni, kaasates kõik selle sees olevad asjad. Peale leviku operaatorit saame kohandada või lisada mis tahes omadusi, mida soovime muuta; meie puhul allika asukoht ja väljundi asukoht.

Atribuut entrymäärab lähtefailid, mis on vaikimisi ./src/index.js. Iga entryatribuudi kirje on võtme+väärtuse paar, millest veebipakett kompileerib (ja vaatab). Ülaltoodud näites olen defineerinud ‘ block-mynamespace-myblock‘, mis asub src/block-mynamespace-myblock.jsühe sisenemispunktina. Siin saate lisada nii palju võtme+väärtuse paare iga lähtefaili jaoks, mida soovite kompileerida.

Vara outputotsustab koostatud failide asukoha. Siin pathsaate määrata kõigi kompileeritud failide sihtkausta. Kasutan teeabi, et saaksin oma konfiguratsioonis kataloogides õigesti liikuda. Ülaltoodud näites ütlen veebipaketile, et kõik kompileeritud failid peaksid jõudma minu theme-folder/assets/js/gutenberg/kausta. Oluline on kasutada ../kataloogipuust üles, projekti kaustast välja ja teise kausta, kus ma tahan, et kõik mu teema Javascripti failid oleksid. Kohandage rada nii, et see sobiks teie projekti struktuuriga.

Teiseks ütlen veebipaketile, et kõik failinimed tuleks nimetada neile vastavate võtmenimedena entry. See veebipaketi konfiguratsioon kompileerib mu theme-folder/gutenberg-dev/src/block-mynamespace-myblock.jsfaili theme-folder/assets/js/gutenberg/block-mynamespace-myblock.js. Kui ma peaksin lisama võti+väärtuse paarina teise lähtefaili entry, kompileeritaks see samasse kausta, mille failinimeks on võti.

Tehke oma webpack.config.jsfailis soovitud muudatused ja salvestage. npmFailide loomiseks nende uutes asukohtades käivitage uuesti mis tahes ehitamiskäsk.

See on kõik! Olete nüüd laiendanud WordPressi veebipaketi konfiguratsiooni ja saate nüüd määrata, kuhu teie allika- ja väljundfailid peaksid minema.

Siiski tahan sellesse juhendisse lisada veel ühe näpunäite. WordPressi Babeli vaikekonfiguratsioonis võivad ESNexti teatud uute funktsioonide jaoks puududa teatud Babeli pistikprogrammid. Näiteks ülaltoodud vaikeseadete ja WordPressi vaikeseadetega ei saa te oma koodis noolefunktsioone kasutada. Kui see on teile oluline, lugege edasi.

Lisage Babeliga uusimate ESNexti süntaksite tugi

Selle WordPressi Babeli vaikeseadeldise kirjutamise seisuga puudub „eksperimentaalsete süntaksite" tugi, mis sisaldab näiteks noolefunktsioone. Selle toe lisamiseks peate esitama oma Babeli konfiguratsioonifaili ja siiani pole ma leidnud võimalust WordPressi Babeli konfiguratsiooni laiendamiseks, nagu tegime ülaltoodud veebipaketi konfiguratsiooniga. Seega peame uuesti määratlema Babeli eelseaded ja lisama pistikprogrammi "eksperimentaalsed süntaksid". Kuid ärge muretsege, see on väga väike fail.

Esimene samm on mõne Babeli eelseadete jaoks vajalike pakettide installimine – peame installima samad, mis on määratletud WordPressi Babeli konfiguratsioonis. Käivitage see käsk installimiseks @babel/preset-envja @babel/preset-react, samuti meid huvitava paketi jaoks; @babel/plugin-proposal-class-properties:

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

Teine samm on Babeli konfiguratsioonifaili lisamine. Looge oma projektikaustas fail nimega .babelrc(faililaiendita).

Märkus Windowsi jaoks: kui istute Windowsi masinas, ei ole teil lubatud ilma faililaiendita faile luua. Selle ümber liikumiseks saate selle faili luua terminali/käsuriba abil. Käivitage see käsk:

.babelrcSee käsk väljastab praeguses kaustas olevasse faili "hi". Nüüd saate selle faili oma redaktoris avada, eemaldada "tere" ja lisada allpool tegelik sisu.

Sa .babelrcpeaksid välja nägema umbes selline:

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

Määratleme samad eelseaded, mida teete tavaliselt Reacti projektis, ja samad, mida WordPress teeb. See, mida me lisame, on pluginsvara. Massiivi sisse pluginslisame @babel/plugin-proposal-class-propertiesBabeli pistikprogrammi, mis on vajalik eksperimentaalsete süntaksite (nt noolefunktsioonide) jaoks.

Järeldus

Pidage meeles, et WordPress võib oma konfiguratsiooni igal ajal muuta, eriti tõenäoline on see, et Gutenberg on üsna uus. Kuna me laiendame WordPressi konfiguratsiooni, võib juhtuda, et ühel hetkel peame oma konfiguratsiooni uuesti värskendama, et see vastaks meie vajadustele. Võib-olla otsustab WordPress lisada eksperimentaalsete süntaksite toe, et me ei peaks kogu Babeli konfiguratsiooni tegema.

See pole kaugeltki ammendav juhend Webpacki ja Babeli seadistamisel, vaid paljude katsetamise ja asjade väljamõtlemise tulemus. Loodan, et see on aidanud teil õppida oma Gutenbergi arenduskeskkonda seadistama ja muutnud selle piisavalt lihtsaks, nii et see ei ole nii suur takistus ES6, ESNexti, JSX-i ja kõige selle arendamiseks kasuliku õppimise alustamisel. Gutenberg!