Kohandatud Gutenbergi ploki loomine – 1. osa: arenduskeskkonna seadistamine

Selle õpetusseeria esimeses osas, kuidas luua kohandatud Gutenbergi plokke, peame seadistama oma arenduskeskkonna. Vajame kohta, kuhu saaksime oma koodi ES6/ESNext süntaksites kirjutada ja selle liikvel olles kompileerida. Kohandatud Gutenbergi plokke on võimalik kirjutada ES5 süntaksi abil ilma Webpacki ja Babeli seadistamata. Kuid koodi lugemine ja kirjutamine on tõeliselt tülikas. Kui te pole kindel, miks me peame seda kõike tegema või mis vahe on, lugege minu postitust, mis seda selgitab. Võin teile garanteerida, et kui tulete tagasi, olete veendunud, et astute selle täiendava sammu parema koodi kirjutamiseks.

Ma eeldan, et teil on juba kohalik WordPress, mis töötab LAMP-i pinal või sarnasel. Ja et kirjutate kas teemat või pistikprogrammi. Mis puutub minusse, siis panen oma koodi enda välja töötatud teemasse awp-starter-theme, mis asub minu WordPressi teemakaustas. Ma tahan eraldada oma Gutenbergi arenduse kõigist muudest teemafailidest, nii et loon gutenberg-devoma teema juurkausta sisse alamkataloogi. See on minu projektikaust ja kaust, millele ma ülejäänud õpetuste seerias viitan.

Olen juba kirjutanud üksikasjaliku juhendi selle kohta, kuidas Gutenbergi arenduskeskkonda seadistada, nii et vaatan siin kiiresti läbi. Kui te pole seda kunagi varem teinud, soovitan lugeda allolevat lingitud postitust, kuna see sisaldab rohkem teavet kui see, mida siit leiate!

Seadistage projekt veebipaketiga

Kasutades terminali (iOS-i terminal või Windows cmd töötavad hästi) navigeerige oma projekti kausta (minu puhul awp-starter-theme/gutenberg-dev). Algatame uue projekti, paludes npm-l genereerida package.jsonüldise sisuga a.

Pack.jsoni loomine

npm init -y

Järgmisena installin WordPressi skriptid, mis aitavad meid selle käsuga konfigureerimisel palju (mis lisab alamkausta node_modulesja package-lock.jsonka):

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

Avage package.jsonoma projekti kaustas olev fail redaktoris ja leidke scriptsatribuut. Asendame selle kahe skriptiga äsja installitud WordPressi paketist:

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

"Ehitamisskript" kompileerib mu failid. Kuid kuna seda tuleb iga muudatuse tegemisel käsitsi käivitada, kasutame arendamise ajal pigem "start" skripti. Seejärel käivitab see "vaatamisrežiimi", kus see kuulab mis tahes skriptifailis tehtud muudatustele ja kompileerib need uuesti, kui muudatused salvestate.

Veebipaketi konfiguratsioon

Järgmine samm on veebipaketi konfiguratsioonifaili loomine. Teen seda, sest ma ei soovi kasutada vaikeallika ja väljundi failinimesid ja kaustu. Ma tahan ise otsustada, kus mu lähtefailid asuvad ja kuhu koostatud failid peaksid jõudma.

Paigaldatud paketi abil @wordpress/scriptssaame pärida WordPressi veebipaketi konfiguratsiooni ja tühistada ainult need osad, mida tahame muuta.

Looge meie projektikaustas uus fail nimega webpack.config.jsja avage see redaktoris. Lisa see sisu:

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

See määrab minu sisestusfaili (praegu vaid ühe) entryatribuudis, mis asub srcminu projektikausta alamkaustas nimega block-awhitepixel-myfirstblock.js. Ilmselgelt pange oma failid nii, nagu soovite, kuid ärge unustage muuta nii võtit kui ka väärtust. Kuna outputatribuudis ma palun veebipaketil kompileerida minu sisestusfailid, mille failinimeks on sisestusvõti. Atribuudis pathpalun paigutada kõik koostatud failid projekti kaustast ühe sammu võrra välja teema assets/jskausta. Kohandage failinimesid ja asukohta, et need sobiksid teie projektiga. Kui olete segaduses, vaadake minu üksikasjalikku juhendit .

Looge src/projekti kausta alamkaust ja see on koht, kuhu me paneme kõik lähtefailid. (Reguleerige, kui muutsite entryasukohta webpack.config.js). Looge siin fail block-awhitepixel-myfirstblock.jsja jätke see praegu tühjaks.

On veel üks samm – ja see kehtib meile, kes tahame kasutada ESNexti uusimaid funktsioone. WordPress Babeli vaikekonfiguratsioonil puudub see kahjuks. Ja kuna ma tahan kasutada selliseid funktsioone nagu noolefunktsioonid, pean seadistama ka Babeli.

Paabeli seadistamine

Kõigepealt peame installima mõned paketid meie Babeli konfiguratsiooni jaoks, tippides selle käsu:

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

.babelrcKui see on tehtud, looge meie projektikausta uus fail. Siia paneme oma Babeli konfiguratsiooni:

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

Ja see ongi meie arenduskeskkonna seadistus!

Ehitage käske

Arendamise ajal peate oma Javascripti failid kompileerima. package.jsonLisasime kaks skripti just selle jaoks .

Kui tahame oma Javascripti faile arendada, käivitame terminalis selle:

npm run build

See käsk teostab kompileerimise alati, kui käivitate selle terminalis. Proovige seda ja peaksite nägema, et see genereerib faili block-awhitepixel-myfirstblock.js(koos ühe või kahe muu varafailiga) teie määratletud väljundkaustas, mille määrasite webpack.config.js. Minu puhul ilmub see awp-starter-theme/assets/js/.

Ülaltoodud käsu kasutamine töötab hästi, kuid seda on tüütu korrata iga kord, kui muudate oma failid. Tõenäoliselt eelistaksite selle käsu käivitada:

npm run start

See seab teie terminali vaatamisrežiimi, tuvastab kõik Javascripti failidesse salvestatud muudatused ja kompileerib need töö käigus. Iga kord, kui teie failid sisaldavad vigu, saadab terminal veateateid välja. Kellaprotsessi peatamiseks vajutage klahvikombinatsiooni CTRL + C.

Võrdlusena näeb minu projektikaust nüüd välja nagu pilt. Eelistan eraldada kõik konfiguratsioonifailid ja eriti alamkaust node_modules/(mis sisaldab sõna otseses mõttes kümneid tuhandeid faile) ülejäänud teemakoodist. Muudab ignoreerimise reeglite seadistamise lihtsamaks – näiteks SCSS-i kompilaatorid või git ignoreerimine. Oleme juba seadistanud veebipaketi konfiguratsiooni, et kompileerida lõplikud failid otse awp-starter-theme/assets/js/koos teiste minu teema Javascripti failidega.

Oleme nüüd valmis järgmiseks osaks, kus alustame oma esimese kohandatud ploki registreerimisega.