{"id":233905,"date":"2023-02-24T18:44:00","date_gmt":"2023-02-24T15:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233905"},"modified":"2022-11-11T13:06:40","modified_gmt":"2022-11-11T10:06:40","slug":"guida-completa-alla-creazione-di-un-ambiente-di-sviluppo-per-gutenberg","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/guida-completa-alla-creazione-di-un-ambiente-di-sviluppo-per-gutenberg\/","title":{"rendered":"Guida completa alla creazione di un ambiente di sviluppo per Gutenberg"},"content":{"rendered":"\n

Questa guida \u00e8 per te che vuoi scrivere codice per Gutenberg con le sintassi ES6, ESNext e JSX e devi configurare webpack e babel per trasformarli in file che puoi usare nell’editor Gutenberg. Vedremo cosa devi fare, perch\u00e9 e come possiamo utilizzare ed estendere le impostazioni predefinite da WordPress e personalizzarle in base alle nostre esigenze.<\/p>\n

Se sei nuovo di zecca ai concetti di npm, webpcak e Babel, dovresti leggere la sezione seguente che mira a spiegare le basi di come funzionano questi strumenti e come li usi. Tuttavia, se l’hai gi\u00e0 fatto in precedenza e hai familiarit\u00e0 con il processo, magari sviluppando con React, passa alla sezione successiva in cui imposteremo effettivamente le cose.<\/p>\n

Per principianti: npm, webpack e babel<\/h2>\n

Se non sei sicuro del motivo per cui dobbiamo fare tutto questo per scrivere Javascript per Gutenberg, ti consiglio di leggere il mio post<\/a> che esplora le basi dello sviluppo per Gutenberg, dove spiego la differenza nelle versioni di Javascript e perch\u00e9 ne vale la pena.<\/p>\n

Se non l’hai mai fatto prima, dovrai prima installare Node.js<\/a> sul tuo computer. Fare clic sul collegamento, scaricarlo e installarlo. Incluso in Node.js otterrai uno strumento che utilizzeremo per impostare la maggior parte della configurazione. Questo strumento \u00e8 npm<\/code>, che consente di installare librerie Javascript ed eseguire script tramite riga di comando\/terminale. Puoi in alternativa usare yarn<\/code>se lo preferisci, ma per questa guida useremo npm<\/code>.<\/p>\n

npm<\/h3>\n

Questa guida non entrer\u00e0 nel dettaglio di tutte le cose che puoi fare con npm<\/code>, ma spiegher\u00e0 il concetto di base e le cose che sono rilevanti per i nostri scopi. Useremo npm<\/code>per due cose; per l’installazione delle librerie richieste nel nostro progetto e per l’esecuzione di comandi per creare (compilare) i nostri file Javascript.<\/p>\n

Con npm<\/code>puoi installare qualsiasi pacchetto Javascript open source pubblico. Se dovessimo sviluppare con React (al di fuori di WordPress) avremmo bisogno di installare librerie React e librerie webpack. WordPress offre un’intera gamma di librerie (principalmente per Gutenberg) che puoi installare, ma a noi interessa solo una: @wordpress\/scripts<\/code>\u2013 che ci aiuta a semplificare la nostra configurazione.<\/p>\n

Ogni volta che installi una libreria, npm<\/code>verr\u00e0 creata una sottocartella ” node_modules<\/code>" in cui sono archiviate le librerie installate. Non dovrai mai entrare in questa cartella o modificare nulla qui, ma tieni presente che questa cartella conterr\u00e0 facilmente (letteralmente!) decine di migliaia di file. Questa \u00e8 una cartella che non dovresti mai impegnare a git o includere in alcun tema o plug-in finito. Le librerie sono necessarie solo durante lo sviluppo.<\/p>\n

Quando il tuo ambiente \u00e8 configurato, puoi usarlo npm<\/code>per eseguire gli script definiti nel tuo package.json<\/code>file. A seconda del progetto normalmente avresti almeno due script; uno per creare gli script e uno per avviare la "modalit\u00e0 di visualizzazione". In "modalit\u00e0 orologio" npm<\/code>avvia un processo nel terminale che attende e ascolta le modifiche apportate in qualsiasi file e le compila in fase di esecuzione ogni volta che premi Salva. Potresti avere familiarit\u00e0 con questo concetto se hai gi\u00e0 utilizzato programmi di compilazione SCSS o LESS. \u00c8 molto pi\u00f9 efficiente eseguire uno script "watch" in background che si ricompila ogni volta che si salva, invece di andare al terminale ed eseguire il comando build dopo ogni modifica.<\/p>\n

webpack e babel<\/h3>\n

Puoi ottenere sviluppando per Gutenberg senza eseguire alcun webpack o configurazione babel. Poich\u00e9 utilizziamo le librerie di WordPress, lo gestiranno per noi. Tuttavia, questo ha uno svantaggio: l’impostazione predefinita \u00e8 una posizione e un nome file fissi sia per i file di origine che per quelli di output. L’intero sviluppo di Javascript deve essere scritto all’interno di un file, in project-folder\/src\/index.js<\/code>, e la build finir\u00e0 sempre in project-folder\/build\/index.js<\/code>. Se stai bene con questo, puoi saltare l’intera parte sulla configurazione del webpack. Tuttavia, se stai sviluppando un tema o un plug-in con diverse funzionalit\u00e0 di Gutenberg (blocchi personalizzati, filtri, ecc.), potresti almeno volere un nome e una posizione del file di output diversi, oltre a consentire pi\u00f9 file.<\/p>\n

Se utilizzi il pacchetto di WordPress per gestire l’installazione (@wordpress\/scripts<\/code>), Babel \u00e8 gi\u00e0 configurato. Ma dovresti essere consapevole del fatto che il pacchetto di WordPress potrebbe non includere plug-in che potresti voler utilizzare. C’\u00e8 ad esempio un pacchetto che permette di utilizzare le nuove cosiddette “funzioni freccia" (myFunction = (param) => { }<\/code>), per definire funzioni senza bisogno di associare this<\/code>. Se vuoi assolutamente utilizzare queste funzionalit\u00e0 di ESNext, dovrai configurare tu stesso Babel invece di utilizzare le impostazioni predefinite di WordPress. Vedr\u00f2 come di seguito.<\/p>\n

Il processo<\/h3>\n

Il processo di sviluppo con webpack una volta che tutto \u00e8 impostato e installato, consiste nel navigare nella cartella del progetto nel terminale e avviare lo script "watch". Rimarr\u00e0 aperto e ascolter\u00e0 le modifiche apportate ai tuoi file JS. Ogni volta che premi Salva nei tuoi file Javascript, il terminale emetter\u00e0 informazioni (si spera) che ha ricompilato correttamente il file. Se si sono verificati errori di compilazione, verranno visualizzati nel terminale. Per interrompere il processo "guarda", premi CTRL + C.<\/p>\n

Allestimento dell’ambiente<\/h2>\n

Presumo che tu abbia gi\u00e0 un WordPress locale in esecuzione su alcuni stack LAMP (programmi come WampServer, XAMPP, Docker o simili) e che tu abbia un plugin o un tema pronto per iniziare a codificare il tuo Javascript.<\/p>\n

Consiglio di creare una sottocartella dedicata allo sviluppo di Javascript poich\u00e9 potresti ritrovarti con diversi file e cartelle di configurazione. Ci\u00f2 semplifica la separazione dei file e delle cartelle (ad esempio node_modules\/<\/code>) che non si desidera includere nei commit git o nelle build finali. Ma va benissimo usare il tuo tema principale o la cartella del plugin come cartella del progetto per lo sviluppo di Javascript.<\/p>\n

Nel terminale (il terminale Mac OS o il prompt dei comandi di Windows funzionano entrambi correttamente) vai alla cartella del progetto. Per quanto riguarda questo tutorial, presumo che siamo in un tema e abbiamo creato una sottocartella vuota gutenberg-dev\/<\/code>come cartella del nostro progetto.<\/p>\n

Il primo passo \u00e8 l’inizializzazione di un progetto npm, che in pratica \u00e8 semplicemente dire npm<\/code>di generare un package.json<\/code>file. Questo package.json<\/code>file informa npm<\/code>su quali pacchetti sono richiesti e quali script sono disponibili per l’esecuzione. Digita questo nel terminale;<\/p>\n

npm init -y<\/code><\/pre>\n
Questo genera un package.json<\/code>file con contenuto predefinito nella cartella del progetto.<\/p>\n
Successivamente installeremo il pacchetto di WordPress che ci aiuter\u00e0 a ridurre la quantit\u00e0 di configurazione che dovremo fare. Esegui questo comando:<\/p>\n
npm install --save-dev --save-exact @wordpress\/scripts<\/code><\/pre>\n
Il tag --save-dev<\/code>informa npm<\/code>che le librerie fornite sono necessarie solo per lo sviluppo e --save-exact<\/code>si assicura npm<\/code>che installi solo una versione, l’ultima.<\/p>\n
Apri il package.json<\/code>file nel tuo editor. (npm<\/code>avr\u00e0 anche generato un package-lock.json<\/code>file durante l’installazione dei pacchetti, puoi semplicemente ignorare questo file, package.json<\/code>apporterai le modifiche). Dovrebbe essere riempito con la configurazione predefinita e potresti notare che l’installazione del pacchetto che abbiamo eseguito in precedenza ha aggiunto una voce @wordpress\/scripts<\/code>di una determinata versione in devDependencies<\/code>. Man mano che installerai pi\u00f9 pacchetti, npm<\/code>verr\u00e0 aggiornato package.json<\/code>con le voci per ogni pacchetto. Tutto ci\u00f2 di cui dobbiamo preoccuparci in questo file \u00e8 la scripts<\/code>propriet\u00e0, che \u00e8 per gli script (comandi) che puoi usare npm<\/code>per l’esecuzione. Aggiorna la propriet\u00e0 degli script in questo (puoi rimuovere il "test" predefinito):<\/p>\n
\"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\"\n},<\/code><\/pre>\n
Questo pezzo di codice dice npm<\/code>che abbiamo due script che possiamo eseguire in questa cartella del progetto; “costruisci” e “inizia”. Eseguiamo uno script con il comando npm run <scriptname><\/code>, in cui npm<\/code>cercher\u00e0 package.json<\/code>ed eseguir\u00e0 il comando definito come suo valore. Usiamo lo strumento wp-scripts<\/code>fornito nel pacchetto che abbiamo appena installato per compilare il nostro Javascript una volta (\"build\"<\/code>) o avviare la modalit\u00e0 "guarda" \/ "ascolta" per compilare ogni volta che salviamo le modifiche (\"start\"<\/code>).<\/p>\n
Questo ci consente anche di utilizzare il webpack di WordPress e la configurazione di Babel, quindi non dobbiamo farlo da soli.<\/p>\n
Nella cartella del tuo progetto crea una sottocartella chiamata src\/<\/code>. All’interno di questa cartella crea un index.js<\/code>file.<\/p>\n
Se stai bene con le impostazioni predefinite del webpack, ora hai finito! index.js<\/code>Scrivi il tuo codice ES6 e JSX e chiedi npm<\/code>di compilarli eseguendo il comando build:<\/p>\n
npm run build<\/code><\/pre>\n
oppure avvia un processo "watch" nel terminale che ascolta le modifiche apportate con questo comando (usa CTRL+C per interrompere il processo di visualizzazione):<\/p>\n
npm run start<\/code><\/pre>\n
L’esecuzione di uno di questi generer\u00e0 una build\/<\/code>sottocartella nel tuo progetto direttamente con il risultato compilato in build\/index.js<\/code>.<\/p>\n
Questo \u00e8 tutto per la configurazione dell’ambiente pi\u00f9 semplice! Ora sei pronto per scrivere Javascript ES6 per Gutenberg!<\/strong><\/p>\n
Se desideri modificare la posizione e i nomi dei file di origine o di output, continua a leggere.<\/p>\n
Configurazione di nomi e percorsi di file di origine e di output<\/h3>\n
Se tu, come me, non sei soddisfatto del nome file e della struttura predefiniti, specialmente per i file di output, devi esaminare la configurazione del webpack. Normalmente, ad esempio, se stai sviluppando per React al di fuori di WordPress, dovresti impostare una configurazione completa del pacchetto web con il plug-in Babel. Fortunatamente WordPress si occupa di questo per noi e ci consente di estendere la configurazione del pacchetto web di WordPress e regolare solo le parti che vogliamo modificare.<\/p>\n
Nella cartella del tuo progetto (la stessa cartella di package.json<\/code>) crea un file chiamato webpack.config.js<\/code>e aprilo nel tuo editor. Scrivi quanto segue in questo file:<\/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
La prima cosa che facciamo \u00e8 recuperare @wordpress\/scripts<\/code>la configurazione del webpack nella variabile defaultConfig<\/code>. All’interno del webpack config module.exports<\/code>, la prima cosa che facciamo \u00e8 applicare tutto defaultConfig<\/code>usando l’operatore spread (...<\/code>). Queste due parti si stanno assicurando di estendere la configurazione del webpack di WordPress includendo tutto al suo interno. Dopo l’operatore di diffusione possiamo regolare o aggiungere qualsiasi propriet\u00e0 che desideriamo modificare; nel nostro caso la posizione di origine e la posizione di output.<\/p>\n
La entry<\/code>propriet\u00e0 definisce i file di origine, che per impostazione predefinita sono .\/src\/index.js<\/code>. Ogni voce nella entry<\/code>propriet\u00e0 \u00e8 una coppia chiave+valore da cui il webpack compiler\u00e0 (e controller\u00e0). Nell’esempio sopra ho definito ‘ block-mynamespace-myblock<\/code>‘ che si trova in src\/block-mynamespace-myblock.js<\/code>un punto di ingresso. Puoi aggiungere tutte le coppie chiave+valore qui per ogni file sorgente che desideri compilare.<\/p>\n
La output<\/code>propriet\u00e0 decide la posizione dei file compilati. In path<\/code>si definisce la cartella di destinazione per tutti i file compilati. Sto usando un path helper per poter navigare correttamente nelle directory nella mia configurazione. Nell’esempio sopra sto dicendo al webpack che tutti i file compilati dovrebbero finire nella mia theme-folder\/assets\/js\/gutenberg\/<\/code>cartella. La cosa importante \u00e8 usare ..\/<\/code>per attraversare l’albero delle directory, fuori dalla cartella del progetto e in un’altra cartella in cui voglio che siano tutti i file Javascript del mio tema. Regola il percorso per adattarlo alla struttura del tuo progetto.<\/p>\n
In secondo luogo, sto dicendo al webpack che tutti i nomi di file dovrebbero essere nominati come i entry<\/code>nomi delle chiavi corrispondenti. theme-folder\/gutenberg-dev\/src\/block-mynamespace-myblock.js<\/code>Questa configurazione del webpack compiler\u00e0 il mio file theme-folder\/assets\/js\/gutenberg\/block-mynamespace-myblock.js<\/code>. Se dovessi aggiungere un altro file sorgente come coppia chiave+valore in entry<\/code>, verrebbe compilato nella stessa cartella con la chiave come nome file.<\/p>\n
Apporta le modifiche desiderate nel webpack.config.js<\/code>file e salva. Eseguire nuovamente uno qualsiasi dei npm<\/code>comandi di compilazione per generare i file nelle nuove posizioni.<\/p>\n
Questo \u00e8 tutto! Ora hai esteso la configurazione del webpack di WordPress e ora controlli dove dovrebbero andare i tuoi file di origine e di output.<\/strong><\/p>\n
Tuttavia voglio includere un ultimo consiglio in questa guida. La configurazione predefinita di WordPress per Babel potrebbe non avere alcuni plug-in Babel per alcune nuove funzionalit\u00e0 in ESNext. Ad esempio, con l’impostazione predefinita sopra e le impostazioni predefinite di WordPress non sarai in grado di utilizzare le funzioni freccia nel tuo codice. Se questo \u00e8 importante per te, continua a leggere.<\/p>\n
Aggiungi il supporto per le pi\u00f9 recenti sintassi ESNext con Babel<\/h3>\n
Al momento in cui scrivo, l’impostazione predefinita di Babel di WordPress manca del supporto per "sintassi sperimentali", che include ad esempio le funzioni delle frecce. Per aggiungere supporto per questo, devi fornire il tuo file di configurazione Babel, e finora non ho trovato un modo per estendere la configurazione Babel di WordPress come abbiamo fatto con la configurazione del webpack sopra. Quindi dobbiamo ridefinire i preset di Babel e aggiungere il plug-in "sintassi sperimentali". Ma non preoccuparti, \u00e8 un file molto piccolo.<\/p>\n
Il primo passo \u00e8 installare alcuni pacchetti di cui abbiamo bisogno per i preset Babel: dobbiamo installare gli stessi definiti nella configurazione Babel di WordPress. Esegui questo comando per l’installazione @babel\/preset-env<\/code>e @babel\/preset-react<\/code>, cos\u00ec come il pacchetto che ci interessa; @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
Il secondo passaggio consiste nell’aggiungere il file di configurazione di Babel. Nella cartella del progetto, crea un file denominato .babelrc<\/code>(nessuna estensione file).<\/p>\n
Nota per Windows: se sei seduto su una macchina Windows non puoi creare file senza estensioni di file. Per aggirare questo problema, puoi creare questo file usando il terminale\/prompt dei comandi. Esegui questo comando:<\/p>\n
echo hi > .babelrc<\/code><\/pre>\n
Questo comando generer\u00e0 "ciao" nel file .babelrc<\/code>nella cartella corrente. Ora puoi aprire questo file nel tuo editor, rimuovere il "ciao" e aggiungere il contenuto effettivo di seguito.<\/p>\n
Il tuo .babelrc<\/code>dovrebbe assomigliare a questo:<\/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
Definiamo gli stessi preset che faresti normalmente in un progetto React, e lo stesso di WordPress. Quello che stiamo aggiungendo \u00e8 la plugins<\/code>propriet\u00e0. All’interno dell’array plugins<\/code>aggiungiamo il @babel\/plugin-proposal-class-properties<\/code>plugin Babel necessario per "sintassi sperimentali" come le funzioni delle frecce.<\/p>\n
Conclusione<\/h2>\n
Tieni presente che WordPress pu\u00f2 modificare la sua configurazione in qualsiasi momento, \u00e8 particolarmente probabile che ci\u00f2 accada perch\u00e9 Gutenberg \u00e8 abbastanza nuovo. Poich\u00e9 estendiamo la configurazione di WordPress, a un certo punto potrebbe essere necessario aggiornare nuovamente la nostra configurazione per soddisfare le nostre esigenze. Forse WordPress decide di includere il supporto per sintassi sperimentali in modo da non dover eseguire l’intera configurazione di Babel.<\/p>\n
Questa non \u00e8 affatto una guida esauriente nella configurazione di Webpack e Babel, ma il risultato di un sacco di esperimenti e di capire le cose. Spero che questo ti abbia aiutato a imparare a configurare il tuo ambiente di sviluppo Gutenberg e lo abbia reso abbastanza semplice in modo che questo non sia un grosso ostacolo per iniziare a imparare ES6, ESNext, JSX e tutte quelle cose utili per lo sviluppo per Gutenberg!<\/p>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Questa \u00e8 una guida completa su come impostare npm, webpack e babel per scrivere codice per Gutenberg con sintassi ES6, ESNext e JSX.<\/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":[918,835,939,939,918,1110,814,814,835,844,844,865,865],"tags":[1168],"class_list":["post-233905","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-guida-per-principianti","category-gutenberg-6","category-n-a","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233905","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233905"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233905\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/151834"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233905"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233905"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233905"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}