{"id":79840,"date":"2024-12-02T10:22:53","date_gmt":"2024-12-02T09:22:53","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=79840&#038;preview=true&#038;preview_id=79840"},"modified":"2024-12-10T15:29:26","modified_gmt":"2024-12-10T14:29:26","slug":"sviluppo-wp-scripts","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/","title":{"rendered":"Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts"},"content":{"rendered":"<p>Il lavoro di sviluppo di WordPress per le agenzie pu\u00f2 essere competitivo nel migliore dei casi. Richiede un&#8217;efficienza e una coerenza straordinarie per i progetti di pi\u00f9 clienti.<\/p>\n<p>Indipendentemente dalla vostra esperienza di sviluppatori, la gestione di un intero portafoglio di temi e plugin personalizzati richiede un impegno costante per quanto riguarda la semplificazione del flusso di lavoro. Ecco <code>wp-scripts<\/code>: una potente suite di utility che pu\u00f2 rivoluzionare l&#8217;approccio della vostra agenzia allo sviluppo di WordPress.<\/p>\n<p>Questa guida completa analizza le funzionalit\u00e0 di <code>wp-scripts<\/code> ed esplora le tecniche per i vostri processi di build. In particolare, verranno trattati i temi della compilazione ottimizzata e del bundling, del linting automatizzato, dei test unitari e molto altro ancora: tutto questo vi interesser\u00e0 se vi destreggiate tra pi\u00f9 progetti WordPress di alto livello.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>Il concetto di processo di build<\/h2>\n<p>Prima di esaminare le specifiche di <code>wp-scripts<\/code>, cerchiamo di capire il concetto pi\u00f9 ampio di processo di build di uno sviluppo web. Si tratta di una serie di attivit\u00e0 automatizzate che aiutano a trasformare il codice sorgente in un&#8217;applicazione o in un sito web pronto per la produzione.<\/p>\n<p>Ad esempio, ci sono molti lavori che beneficiano dell&#8217;automazione in questo modo:<\/p>\n<ul>\n<li>Compilazione di JavaScript moderno in codice compatibile con il browser.<\/li>\n<li>Trasposizione dei linguaggi di preprocessore CSS (<a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Sass<\/a>, ad esempio) in CSS standard.<\/li>\n<li>Minimizzazione e ottimizzazione di risorse come <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, CSS e media.<\/li>\n<li>Esecuzione di linters per individuare potenziali errori e applicare gli standard di codifica.<\/li>\n<li>Esecuzione di <a href=\"https:\/\/kinsta.com\/it\/blog\/unit-testing-laravel\/\">test unitari<\/a> per garantire una migliore funzionalit\u00e0 del codice.<\/li>\n<\/ul>\n<p>Questi sono aspetti positivi da automatizzare per qualsiasi <a href=\"https:\/\/kinsta.com\/it\/blog\/workflow-wordpress\/\">flusso di lavoro di sviluppo<\/a>, ma per le agenzie il processo \u00e8 altrettanto cruciale. Per cominciare, potete mantenere la coerenza tra pi\u00f9 progetti (e il vostro team).<\/p>\n<p>Potete anche sviluppare e distribuire con cicli pi\u00f9 rapidi e mantenere tutti i vostri progetti sfruttando questa coerenza, anche quelli pi\u00f9 complessi. Per l&#8217;utente finale, le prestazioni ottimizzate che otterrete si ripercuoteranno sulla sua esperienza complessiva.<\/p>\n<p>In genere, la vostra agenzia pu\u00f2 &#8220;mettere insieme&#8221; processi di build personalizzati utilizzando strumenti come <a href=\"https:\/\/community.kinsta.com\/t\/install-node-and-gulp\/2804\" target=\"_blank\" rel=\"noopener noreferrer\">Gulp<\/a>, <a href=\"https:\/\/gruntjs.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">Grunt<\/a> o persino processi manuali. Tuttavia, questi approcci possono spesso portare a incoerenze tra i vari progetti, per non parlare dei costi di manutenzione.<\/p>\n<h2>wp-scripts: un cambio di flusso di lavoro per lo sviluppo di WordPress in agenzia<\/h2>\n<p>Nel contesto di WordPress, un processo di build pu\u00f2 offrire una notevole semplificazione per lo sviluppo di temi e plugin. Permette di utilizzare strumenti e pratiche moderne e di garantire allo stesso tempo la compatibilit\u00e0 con la piattaforma.<\/p>\n<p>Il pacchetto <code>@wordpress\/scripts<\/code> (abbreviato in <code>wp-scripts<\/code> in questo post) \u00e8 una raccolta di file di configurazione e script che aiutano a semplificare il processo di build dei progetti WordPress.<\/p>\n<figure id=\"attachment_186951\" aria-describedby=\"caption-attachment-186951\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-186951\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/wp-scripts.png\" alt=\"Uno snippet di codice che mostra la sezione script di un file package.json per un progetto WordPress. Elenca vari script npm per attivit\u00e0 quali la compilazione, la verifica dei motori e delle licenze, la formattazione, il linting (per CSS, JavaScript, documenti Markdown e package.json), l'aggiornamento dei pacchetti, la creazione di file zip di plugin, l'avvio del progetto e l'esecuzione di test (sia end-to-end che unit test). Tutti gli script utilizzano wp-scripts come comando di base.\" width=\"1200\" height=\"842\"><figcaption id=\"caption-attachment-186951\" class=\"wp-caption-text\">Parte di un riferimento wp-scripts per i vari script che un progetto utilizzer\u00e0.<\/figcaption><\/figure>\n<p>Il team di Make WordPress Core sviluppa e mantiene il pacchetto, che \u00e8 parte integrante degli editor a blocchi e del sito. Ma soprattutto, \u00e8 possibile usarlo anche per lo sviluppo di temi e plugin personalizzati.<\/p>\n<p>Per approcciare lo sviluppo di WordPress in scala all&#8217;interno di un&#8217;agenzia, <code>wp-scripts<\/code> sar\u00e0 una parte centrale del flusso di lavoro. \u00c8 pi\u00f9 di un semplice strumento di build; \u00e8 una soluzione completa per progetti WordPress moderni che si allinea alla necessit\u00e0 di un sofisticato flusso di lavoro di sviluppo.<\/p>\n<h3>Le funzionalit\u00e0 chiave di wp-scripts<\/h3>\n<p>Man mano che le pratiche JavaScript pi\u00f9 moderne si diffondono nell&#8217;ecosistema WordPress, abbiamo bisogno di strumenti di compilazione pi\u00f9 standardizzati per adattarle. Un set di strumenti di build unificato sotto forma di <code>wp-scripts<\/code> va a vantaggio dell&#8217;intero ecosistema di sviluppo di WordPress.<\/p>\n<p>Come tale, <code>wp-scripts<\/code> offre una serie di funzionalit\u00e0 che rendono lo sviluppo di WordPress pi\u00f9 efficiente:<\/p>\n<ul>\n<li><strong>Configurazione &#8220;zero-config&#8221;.<\/strong> Potete iniziare senza bisogno di complesse configurazioni <a href=\"https:\/\/kinsta.com\/it\/blog\/vite-vs-webpack\/\">webpack<\/a>.<\/li>\n<li><strong>Supporto di JavaScript moderno.<\/strong> Il vostro codice ES6 verr\u00e0 transpilato per garantire la compatibilit\u00e0 con il browser e per darvi maggiore fiducia nella sua accuratezza.<\/li>\n<li><strong>Elaborazione CSS integrata.<\/strong> Se utilizzate preprocessori CSS come Sass, avrete un supporto immediato.<\/li>\n<li><strong>Strumenti per la qualit\u00e0 del codice.<\/strong> Il pacchetto integra <a href=\"https:\/\/kinsta.com\/it\/blog\/estensioni-vscode\/#1-prettier\">ESLint e Prettier<\/a> per garantire uno stile e una qualit\u00e0 del codice coerenti.<\/li>\n<li><strong>Utilit\u00e0 di test.<\/strong> Il pacchetto mette a disposizione <a href=\"https:\/\/kinsta.com\/it\/blog\/jest\/\">Jest<\/a> per i test unitari e una facile esecuzione.<\/li>\n<li><strong>Hot reloading.<\/strong> Se avete la possibilit\u00e0 di ricaricare le modifiche in tempo reale, potete accelerare i tempi di sviluppo.<\/li>\n<\/ul>\n<p>Insieme, <code>wp-scripts<\/code> offre molti vantaggi fondamentali per le agenzie che gestiscono pi\u00f9 progetti WordPress. Ad esempio, potete standardizzare l&#8217;ambiente di sviluppo per ogni progetto e replicare il processo di build anche per i nuovi progetti. Il pacchetto vi permetter\u00e0 di centralizzare le dipendenze degli strumenti di compilazione, rendendo pi\u00f9 gestibili gli aggiornamenti e le patch di sicurezza.<\/p>\n<p>In generale, potrete preoccuparvi meno dei problemi di compatibilit\u00e0, ridurre i tempi di configurazione ed eliminare molti degli errori tipici che si commettono durante un processo di build meno snello.<\/p>\n<h3>Confronto tra wp-script e un tipico processo di sviluppo di WordPress<\/h3>\n<p>Il tipico processo di sviluppo di WordPress spesso prevede l&#8217;utilizzo dell&#8217;<a href=\"https:\/\/kinsta.com\/it\/blog\/wp-enqueue-scripts\/\">enqueuing manuale per gli script e gli stili<\/a>. Inoltre, \u00e8 probabile che scriviate <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript vanilla<\/a> o <a href=\"https:\/\/kinsta.com\/it\/blog\/jquery\/\">jQuery<\/a> e che vi affidiate a strumenti di compilazione di terze parti, oppure che non sia previsto alcun processo di compilazione.<\/p>\n<p>Al contrario, wp-scripts offre un approccio moderno e integrato in quasi tutte le aree:<\/p>\n<table>\n<tbody>\n<tr>\n<td>Elemento<\/td>\n<td>Sviluppo tipico<\/td>\n<td>wp-scripts<\/td>\n<\/tr>\n<tr>\n<td>JavaScript<\/td>\n<td>Spesso JavaScript vanilla o jQuery<\/td>\n<td>Supporto ES6 e React<\/td>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td>CSS diretto o preprocessori di base<\/td>\n<td>Supporto per l&#8217;elaborazione di Sass e PostCSS<\/td>\n<\/tr>\n<tr>\n<td>Processo di build<\/td>\n<td>Configurazione manuale o personalizzata con Gulp o Grunt<\/td>\n<td>Configurazione zero utilizzando webpack, integrato nel pacchetto.<\/td>\n<\/tr>\n<tr>\n<td>Qualit\u00e0 del codice<\/td>\n<td>Linting manuale o strumenti separati integrati con l&#8217;editor di codice<\/td>\n<td>ESLint e Prettier sono integrati nei wp-scripts<\/td>\n<\/tr>\n<tr>\n<td>Unit testing<\/td>\n<td>Se non \u00e8 un passo trascurato, di solito c&#8217;\u00e8 una configurazione separata.<\/td>\n<td>Il pacchetto integra i test Jest<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Nel complesso, <code>wp-scripts<\/code> offre una maggiore flessibilit\u00e0 grazie alla sua integrazione con strumenti che potreste non usare gi\u00e0. Ad esempio, lo sforzo di configurare <a href=\"https:\/\/postcss.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">PostCSS<\/a>, <a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">webpack<\/a> o <a href=\"https:\/\/jestjs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Jest<\/a> potrebbe essere un&#8217;operazione che salti per mancanza di tempo.<\/p>\n<h2>Come configurare l&#8217;ambiente di sviluppo per incorporare gli script wp<\/h2>\n<p>L&#8217;utilizzo di <code>wp-scripts<\/code> ha i suoi requisiti, ma \u00e8 probabile che utilizziate gi\u00e0 questi strumenti. Se \u00e8 necessario, installate <a href=\"https:\/\/kinsta.com\/it\/blog\/come-installare-node-js\/\">Node.js e npm<\/a> insieme a un ambiente di sviluppo WordPress locale. <a href=\"https:\/\/kinsta.com\/it\/devkinsta\/\">DevKinsta<\/a> sar\u00e0 una buona soluzione, grazie all&#8217;esecuzione su <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-docker\/\">Docker<\/a> e al supporto degli ambienti di staging di Kinsta.<\/p>\n<figure id=\"attachment_186952\" aria-describedby=\"caption-attachment-186952\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-186952\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/devkinsta-interface.png\" alt=\"L'interfaccia di DevKinsta visualizza le informazioni sul sito per un sito WordPress. Include il tipo di sito, il tipo di database, il server web e la versione PHP. La parte superiore dell'interfaccia mostra i pulsanti per Aprire il sito, Sincronizzare, Gestire il database e Amministrare WP. Sul lato sinistro viene mostrata una piccola anteprima del sito. Nella parte inferiore dell'interfaccia si trova la sezione Stato del sito con il pulsante Interrompi sito.\" width=\"1200\" height=\"689\"><figcaption id=\"caption-attachment-186952\" class=\"wp-caption-text\"><br \/>L&#8217;interfaccia principale di DevKinsta.<\/figcaption><\/figure>\n<p>Se utilizzate gi\u00e0 il pacchetto <code>create-block<\/code> per <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-gutenberg\/\">sviluppare i plugin di WordPress Block<\/a>, installate <code>wp-scripts<\/code> insieme alle altre risorse. Da qui potete iniziare a impostare un progetto di sviluppo del pacchetto.<\/p>\n<h3>Impostazione di un nuovo progetto WordPress con wp-scripts<\/h3>\n<p>Il lavoro che intraprenderete si svolger\u00e0 all&#8217;interno della directory <strong>wp-content<\/strong> della vostra installazione di WordPress. La sottodirectory specifica si riferisce al tipo di progetto creato: <strong>wp-content\/themes<\/strong> per i temi e <strong>wp-content\/plugins<\/strong> per i plugin!<\/p>\n<p>In ogni caso, la cartella del progetto dovrebbe includere una serie di file e directory:<\/p>\n<ul>\n<li>Un file <code>package.json<\/code>.<\/li>\n<li>Una cartella <strong>build<\/strong>.<\/li>\n<li>Una cartella <strong>src<\/strong> che include anche un file <code>index.js<\/code>.<\/li>\n<\/ul>\n<p>Per creare un file <code>package.json<\/code>, navigate nella directory del vostro progetto utilizzando il Terminale o un&#8217;applicazione a riga di comando. L&#8217;esecuzione del comando <code>npm init<\/code> vi condurr\u00e0 attraverso un processo di configurazione interattivo e il vostro &#8220;punto di ingresso&#8221; dovrebbe essere <code>build\/index.js<\/code>:<\/p>\n<figure id=\"attachment_186953\" aria-describedby=\"caption-attachment-186953\" style=\"width: 1200px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-186953\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2024\/10\/npm-init.png\" alt=\"Una finestra di terminale con sfondo scuro che mostra l'output di un comando npm init per un progetto di tema WordPress. Il testo spiega che questa utility guider\u00e0 l'utente nella creazione di un file package.json, coprendo gli elementi comuni e suggerendo valori predefiniti ragionevoli. Fornisce istruzioni su come installare i pacchetti e salvarli come dipendenze. Il terminale mostra i dettagli della configurazione iniziale, tra cui il nome del pacchetto, la versione, la descrizione e il punto di ingresso.\" width=\"1200\" height=\"420\"><figcaption id=\"caption-attachment-186953\" class=\"wp-caption-text\">Un&#8217;esecuzione parziale del processo npm init, che mostra il prompt del valore del punto di ingresso.<\/figcaption><\/figure>\n<p>Successivamente, installate <code>wp-scripts<\/code> come dipendenza di sviluppo:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts --save-dev\n<\/code><\/pre>\n<p>Dovreste vedere anche un paio di directory e file generati automaticamente: <strong>node_modules<\/strong> e <code>package-lock.json<\/code>. In ogni caso, ora dovete fare riferimento agli script predefiniti all&#8217;interno del file <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"build\": \"wp-scripts build\",\n  \"start\": \"wp-scripts start\",\n}\n<\/code><\/pre>\n<p>Probabilmente tornerete spesso su questo file per aggiungere altri script se necessario. Ad esempio:<\/p>\n<pre><code class=\"language-json\">\u2026\n\n\"lint:js\": \"wp-scripts lint-js\",\n\"lint:css\": \"wp-scripts lint-style\",\n\"lint:pkg-json\": \"wp-scripts lint-pkg-json\",\n\"test\": \"wp-scripts test-unit-js\"\n\u2026\n<\/code><\/pre>\n<p>Potreste anche aver bisogno di <a href=\"https:\/\/developer.wordpress.org\/block-editor\/how-to-guides\/enqueueing-assets-in-the-editor\/\" target=\"_blank\" rel=\"noopener noreferrer\">mettere in coda le risorse del vostro tema o del vostro plugin<\/a> e poi salvare le modifiche.<\/p>\n<h3>Comprendere e utilizzare webpack con wp-scripts<\/h3>\n<p>Per il raggruppamento delle risorse &#8220;dietro le quinte&#8221;, <code>wp-scripts<\/code> utilizza webpack. Non \u00e8 necessario configurarlo, anche se la comprensione del suo ruolo pu\u00f2 aiutare a sfruttare <code>wp-scripts<\/code> in modo pi\u00f9 efficace. Webpack ha molte responsabilit\u00e0 quando si tratta della configurazione:<\/p>\n<ul>\n<li>Aiuta a risolvere le dipendenze tra i moduli JavaScript.<\/li>\n<li>Pu\u00f2 trasporre il codice JavaScript moderno in codice compatibile con il browser.<\/li>\n<li>Aiuta a elaborare e ottimizzare gli stili.<\/li>\n<li>Permette di generare source map per facilitare il debug.<\/li>\n<li>Pu\u00f2 aiutare a creare bundle minificati pronti per la produzione.<\/li>\n<\/ul>\n<p>Avete gi\u00e0 una configurazione predefinita di webpack all&#8217;interno di <code>wp-scripts<\/code>. Questo funziona bene per la maggior parte dei progetti WordPress. In alcuni casi, per\u00f2, potreste aver bisogno di creare delle configurazioni personalizzate.<\/p>\n<h3>Configurazione webpack avanzata per le agenzie<\/h3>\n<p>Sebbene la configurazione webpack predefinita sia ideale per la maggior parte dei progetti di sviluppo, ci sono casi in cui \u00e8 necessario creare una configurazione per le vostre esigenze specifiche. Ad esempio, potreste avere a che fare con strutture complesse di temi o architetture uniche di plugin. In questo caso, un file <code>webpack.config.js<\/code> nella root del vostro progetto vi sar\u00e0 utile:<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require(\"@wordpress\/scripts\/config\/webpack.config\");\n\nconst path = require('path');\n\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: path.resolve(__dirname, 'src\/js\/main.js'),\n    admin: path.resolve(__dirname, 'src\/js\/admin.js'),\n    \/\/ Add more entry points as needed\n  },\n  output: {\n    filename: '[name].js',\n    path: path.resolve(__dirname, 'dist'),\n  },\n  \/\/ Add custom loaders or plugins here\n};\n<\/code><\/pre>\n<p>Questa configurazione consente di avere pi\u00f9 punti di ingresso, il che \u00e8 particolarmente utile per i temi o i plugin che richiedono script separati per diverse parti dell&#8217;amministrazione o del frontend di WordPress. In questo modo potete estendere la vostra configurazione predefinita e mantenere i vantaggi di <code>wp-scripts<\/code>.<\/p>\n<h2>Le basi dell&#8217;utilizzo di wp-scripts<\/h2>\n<p>Con un ambiente di sviluppo adeguato e la giusta struttura di file e cartelle, potete iniziare a usare <code>wp-scripts<\/code>. Ci sono alcuni comandi di base che vi occuperanno la maggior parte del tempo.<\/p>\n<p>Il comando <code>start<\/code> controlla che i vostri file non vengano modificati, ricompila le risorse al volo e fornisce un hot reloading per un&#8217;esperienza di sviluppo pi\u00f9 fluida:<\/p>\n<pre><code class=\"language-bash\">npm run start\n<\/code><\/pre>\n<p>Si usa all&#8217;inizio di un progetto per avviare un server di sviluppo, anche se non ottimizza il codice compilato nel file <strong>build\/index.js<\/strong>.<\/p>\n<p>Quando dovrete distribuire il progetto, il comando <code>build<\/code> compiler\u00e0 le risorse per la produzione:<\/p>\n<pre><code class=\"language-bash\">npm run build\n<\/code><\/pre>\n<p>Una volta eseguito, il comando esegue alcune operazioni. Ad esempio, trasporta il vostro JavaScript, compila Sass e SCSS in CSS, minifica tutte le risorse e genera <a href=\"https:\/\/web.dev\/articles\/source-maps\" target=\"_blank\" rel=\"noopener noreferrer\">le source map<\/a>. Alla fine, il tutto viene inviato al file <code>build\/index.js<\/code>. Il processo di compilazione crea anche un file <code>build\/index.asset.php<\/code> per la creazione della cache.<\/p>\n<p>Il pacchetto <code>wp-scripts<\/code> fornisce anche diversi comandi di linting per aiutarvi a mantenere alta la qualit\u00e0 del codice:<\/p>\n<ul>\n<li><code>npm run lint:js<\/code>. Si utilizza per eseguire il linting dei file JavaScript.<\/li>\n<li><code>npm run lint:css<\/code>. Questo comando esegue il linting i vostri file CSS o Sass.<\/li>\n<li><code>npm run lint:pkg-json<\/code>. Convalida il vostro file <code>package.json<\/code>.<\/li>\n<\/ul>\n<p>Per i test unitari, dovete semplicemente chiamare <code>npm run test<\/code>, che utilizza Jest per eseguire la vostra suite di test.<\/p>\n<h2>Esplorare le utility principali di wp-scripts<\/h2>\n<p>Le attivit\u00e0 di compilazione di base possono richiedere molto tempo e i comandi tipici richiedono molta automazione. Tuttavia, <code>wp-scripts<\/code> offre una suite di utility sofisticate che rispondono alle esigenze complesse dello sviluppo di WordPress:<\/p>\n<ul>\n<li><strong>Compilazione avanzata.<\/strong> Grazie a configurazioni ottimizzate, potete transpilare i moderni JavaScript, compresi i moduli ECMAScript (ESM) e Javascript XML (JSX), e compilare Sass.<\/li>\n<li><strong>Bundling intelligente.<\/strong> Potete sfruttare la suddivisione del codice e il <a href=\"https:\/\/webpack.js.org\/guides\/tree-shaking\/\" target=\"_blank\" rel=\"noopener noreferrer\">&#8220;tree shaking&#8221;<\/a> di Webpack per ottimizzare la distribuzione delle risorse.<\/li>\n<li><strong>Linting completo.<\/strong> Potete applicare gli standard di codifica ai file JavaScript, CSS e <code>package.json<\/code>.<\/li>\n<li><strong>Test integrati.<\/strong> Con Jest potete eseguire test unitari e rapporti di copertura.<\/li>\n<li><strong>Server di sviluppo.<\/strong> Potete utilizzare l&#8217;hot reloading per uno sviluppo rapido su pi\u00f9 progetti.<\/li>\n<\/ul>\n<p>Potete espandere le funzionalit\u00e0 predefinite di ciascuno di essi per sfruttare un processo di sviluppo di WordPress pi\u00f9 personalizzato, indipendentemente dal fatto che lavoriate su temi o plugin.<\/p>\n<h3>Gestire JSX e JavaScript moderno<\/h3>\n<p>Molti progetti WordPress lavorano con <a href=\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\">elementi JavaScript moderni<\/a> come i <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-tutorial-react\/\">componenti React<\/a>, le funzioni freccia, la destrutturazione, <code>async<\/code>\/<code>await<\/code> e molto altro. Anche alcuni aspetti della base di codice principale, come l&#8217;editor a blocchi, utilizzano JavaScript moderno per costruire le proprie funzionalit\u00e0.<\/p>\n<p>Tuttavia, i browser non comprendono in modo nativo queste sintassi avanzate, per cui \u00e8 necessario un maggiore lavoro di transpilazione e compilazione.<\/p>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/guida-su-jsx\/\">JSX<\/a> permette di scrivere codice simile all&#8217;HTML all&#8217;interno del vostro JavaScript, il che rende pi\u00f9 facile descrivere l&#8217;aspetto delle interfacce e degli altri elementi. Questo pu\u00f2 migliorare la leggibilit\u00e0 e la manutenibilit\u00e0, tanto per cominciare. Potete anche accedere a potenti componenti React per creare interfacce utente (UI) dinamiche.<\/p>\n<p><code>wp-scripts<\/code> utilizza <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel JavaScript compiler<\/a> per convertire i vostri moderni JavaScript e JSX in codice comprensibile ai browser. Gestisce tutte le configurazioni complesse e necessarie, permettendovi di concentrarvi sulla scrittura del codice.<\/p>\n<p>Potete sfruttare questo sistema attraverso il vostro file <code>src\/index.js <\/code>. Date un&#8217;occhiata a questo piccolo esempio di come implementare JSX e JavaScript moderno utilizzando <code>wp-scripts<\/code>:<\/p>\n<pre><code class=\"language-js\">import { render } from '@wordpress\/element';\n\n\/\/ Modern JavaScript feature: Arrow function\nconst HelloWorld = () =&gt; {\n    \/\/ Modern JavaScript feature: Template literal\n    const greeting = `Hello, ${wp.data.select('core\/editor').getCurrentPost().title}!`;    \n\n    \/\/ JSX\n    return (\n        &lt;div className=\"hello-world\"&gt;\n            &lt;h1&gt;{greeting}&lt;\/h1&gt;\n            &lt;p&gt;This is a React component in WordPress!&lt;\/p&gt;\n        &lt;\/div&gt;\n    );\n};\n\n\/\/ Modern JavaScript feature: Optional chaining\nconst rootElement = document.getElementById('hello-world-root');\nif (rootElement?.innerHTML) {\n    render(&lt;HelloWorld \/&gt;, rootElement);\n}\n<\/code><\/pre>\n<p>Inoltre, dovrete inserire lo script nel file <strong>functions.php<\/strong> del vostro tema o nel file principale del vostro plugin:<\/p>\n<pre><code class=\"language-js\">function enqueue_hello_world_script() {\n    wp_enqueue_script(\n        'hello-world-script',\n        get_template_directory_uri() . '\/build\/index.js',\n        ['wp-element'],\n        filemtime(get_template_directory() . '\/build\/index.js'),\n        true\n    );\n}\n\nadd_action('wp_enqueue_scripts', 'enqueue_hello_world_script');<\/code><\/pre>\n<p>Una volta eseguito il comando <code>npx wp-scripts build<\/code>, <code>wp-scripts<\/code> effettuer\u00e0 il transpile dei vostri moderni JavaScript e JSX per creare un file <code>build\/index.js<\/code> compatibile con il browser.<\/p>\n<h3>Controlli di qualit\u00e0 del codice e linting sofisticato<\/h3>\n<p>Il pacchetto <code>wp-scripts<\/code> include diversi strumenti che aiutano a mantenere la qualit\u00e0 del codice e a imporre uno stile coerente nei vostri progetti: oltre a ESLint e Prettier, potete accedere anche a <strong>stylelint<\/strong> per il linting di CSS e SCSS.<\/p>\n<p>Il primo passo consiste nell&#8217;aggiungere gli script di linting al vostro file <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">\"scripts\": {\n  \"lint:js\": \"wp-scripts lint-js\",\n  \"lint:css\": \"wp-scripts lint-style\",\n  \"lint\": \"npm run lint:js && npm run lint:css\"\n}\n<\/code><\/pre>\n<p>Successivamente, create dei file di configurazione personalizzati nella directory principale del progetto. Ad esempio, ESLint richiede di lavorare all&#8217;interno del file <code>.eslintrc.js<\/code>. Questo esempio (in parte) impone l&#8217;uso di template literal per le stringhe nel codice JavaScript:<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    'plugin:@wordpress\/eslint-plugin\/recommended',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'no-console': 'error',\n    'react-hooks\/exhaustive-deps': 'warn',\n    'prefer-template': 'error',\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>Per stylelint, dovete modificare il file <code>.stylelintrc.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nmodule.exports = {\n  extends: [\n    '@wordpress\/stylelint-config\/scss',\n  ],\n  rules: {\n    \/\/ Custom rules here\n    'selector-class-pattern': '^[a-z]+(-[a-z]+)*$',\n    'max-nesting-depth': 3,\n  },\n};\n\u2026\n<\/code><\/pre>\n<p>Se gestite una grande base di codice su pi\u00f9 progetti, avere uno stile di codice coerente \u00e8 fondamentale. In questo modo, potete estendere le configurazioni predefinite di ESLint e stylelint per applicare gli standard di codifica della vostra agenzia.<\/p>\n<p>Da qui, potete eseguire <code>npm run lint<\/code> per mettere in moto questo processo, esteso al tipo specifico di linter. Ad esempio, se avete un codice che riporta alcune concatenazioni tipiche&#8230;<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(\"Hello \" + name + \"!\");\n<\/code><\/pre>\n<p>&#8230; l&#8217;esecuzione di <code>npm run lint:js<\/code> segnaler\u00e0 un errore e vi suggerir\u00e0 di utilizzare invece un template literal:<\/p>\n<pre><code class=\"language-js\">const name = \"World\";\nconsole.log(`Hello ${name}!`);\n<\/code><\/pre>\n<p>Questo \u00e8 un modo inestimabile per eseguire il linting del codice del vostro tema o del vostro plugin WordPress e vi d\u00e0 la possibilit\u00e0 di adattare le regole alle vostre esigenze e ai vostri standard specifici.<\/p>\n<h3>Unit testing<\/h3>\n<p>Gli unit testing sono fondamentali per garantire l&#8217;affidabilit\u00e0 e la manutenibilit\u00e0 della vostra base di codice. Lo strumento che <code>wp-scripts<\/code> utilizza come framework di testing \u00e8 Jest.<\/p>\n<p>Quando eseguite il comando <code>test<\/code>, Jest cerca i file con estensione <code>.test.js<\/code> o <code>.spec.js<\/code> o i file in una directory <strong>__tests__<\/strong>. Esegue quindi i test definiti in questi file e ne riporta i risultati.<\/p>\n<p>Per prima cosa dovete fare riferimento allo script di test all&#8217;interno del vostro file <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\n\"scripts\": {\n  \"test\": \"wp-scripts test-unit-js\"\n}\n\u2026\n<\/code><\/pre>\n<p>Se necessario, create un file come <code>src\/utils.js<\/code>:<\/p>\n<pre><code class=\"language-js\">\u2026\nexport function capitalizeString(str) {\n  return str.charAt(0).toUpperCase() + str.slice(1);\n}\n\nexport function sum(a, b) {\n  return a + b;\n}\n\u2026\n<\/code><\/pre>\n<p>Da qui, create un file di prova, ad esempio <code>src\/__tests__\/utils.test.js<\/code>:<\/p>\n<pre><code class=\"language-js\">import { capitalizeString, sum } from '..\/utils';\n\ndescribe('capitalizeString', () =&gt; {\n  it('capitalizes the first letter of a string', () =&gt; {\n    expect(capitalizeString('hello')).toBe('Hello');\n  });\n  it('returns an empty string if given an empty string', () =&gt; {\n    expect(capitalizeString('')).toBe('');\n  });\n});\n\ndescribe('sum', () =&gt; {\n  it('adds two numbers correctly', () =&gt; {\n    expect(sum(2, 3)).toBe(5);\n  });\n  it('handles negative numbers', () =&gt; {\n    expect(sum(-1, 1)).toBe(0);\n  });\n});\n<\/code><\/pre>\n<p>Una volta eseguito il comando <code>npm run test<\/code>, <code>wp-scripts<\/code> trover\u00e0 ed eseguir\u00e0 automaticamente tutti i file con estensione <strong>.test.js<\/strong>. Potete anche estendere la configurazione predefinita di Jest per supportare qualsiasi esigenza di test avanzata, come la copertura dei test:<\/p>\n<pre><code class=\"language-js\">\/\/ jest.config.js\nconst defaultConfig = require('@wordpress\/scripts\/config\/jest-unit.config');\nmodule.exports = {\n  ...defaultConfig,\n  setupFilesAfterEnv: ['&lt;rootDir&gt;\/tests\/setupTests.js'],\n  collectCoverageFrom: [\n    'src\/**\/*.js',\n    '!src\/tests\/**\/*.js',\n    '!src\/vendor\/**\/*.js',\n  ],\n  coverageThreshold: {\n    global: {\n      branches: 80,\n      functions: 80,\n      lines: 80,\n      statements: 80,\n    },\n  },\n};\n<\/code><\/pre>\n<p>Questa configurazione aggiunge un file di configurazione personalizzato, specifica i file da includere nei report di copertura e imposta delle soglie di copertura per garantire una copertura completa dei test nei vostri progetti. Quando eseguirete questi test, Jest fornir\u00e0 un output che mostra i test che passano e quelli che non passano.<\/p>\n<p>Espandere le capacit\u00e0 dei test unitari in questo modo pu\u00f2 migliorare notevolmente la qualit\u00e0 e l&#8217;affidabilit\u00e0 dei vostri temi e plugin WordPress e snellire l&#8217;intero processo di sviluppo.<\/p>\n<h2>Come integrare i wp-script nei propri flussi di lavoro<\/h2>\n<p>L&#8217;ambito di utilizzo dei wp-script \u00e8 tanto ampio quanto serve a voi. Per dimostrarlo, passiamo in rassegna alcuni approcci rapidi all&#8217;utilizzo di <code>wp-scripts<\/code> per automatizzare attivit\u00e0 tipiche.<\/p>\n<h3>Creare template di progetto riutilizzabili<\/h3>\n<p>\u00c8 probabile che abbiate bisogno di avviare nuovi progetti frequentemente, magari anche ogni giorno. La creazione di un template di progetto personalizzato attraverso la preconfigurazione di <code>wp-scripts<\/code> pu\u00f2 farvi risparmiare molto tempo di configurazione.<\/p>\n<p>Potete iniziare con un progetto di base: un nuovo tema o plugin di WordPress che include la configurazione di <code>wp-scripts<\/code>:<\/p>\n<pre><code class=\"language-bash\">mkdir my-agency-base-theme\ncd my-agency-base-theme\nnpm init -y\nnpm install --save-dev @wordpress\/scripts\n<\/code><\/pre>\n<p>Quindi, impostate la struttura del progetto e create le directory e i file necessari:<\/p>\n<pre><code class=\"language-bash\">mkdir src build\ntouch src\/index.js src\/style.scss\ntouch functions.php style.css\n<\/code><\/pre>\n<p>A questo punto, configurate <code>wp-scripts<\/code> e aggiornate il file <code>package.json<\/code> con i comandi necessari:<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"wp-scripts build\",\n    \"start\": \"wp-scripts start\",\n    \"lint:js\": \"wp-scripts lint-js\",\n    \"lint:css\": \"wp-scripts lint-style\",\n    \"test\": \"wp-scripts test-unit-js\"\n  }\n}\n<\/code><\/pre>\n<p>Potete approfondire questo aspetto per creare configurazioni per webpack, ESLint e stylelint.<\/p>\n<p>Per rendere questo template riutilizzabile e di facile accesso, l&#8217;ideale \u00e8 un <a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-github\/\">repo GitHub<\/a>. Ad esempio, prendete in considerazione un&#8217;origine remota di <code>https:\/\/github.com\/your-agency\/theme-template.git<\/code>.<\/p>\n<p>Quando iniziate un nuovo progetto, potete eseguire un semplice comando:<\/p>\n<pre><code class=\"language-bash\">npx create-wordpress-theme@latest my-new-theme --template your-agency\/theme-template\n<\/code><\/pre>\n<p>Questo cloner\u00e0 il vostro repo di template e imposter\u00e0 un nuovo tema con la configurazione predefinita di <code>wp-scripts<\/code>.<\/p>\n<p>Potete personalizzare ulteriormente il template aggiungendo codice boilerplate specifico per l&#8217;agenzia, come ad esempio le funzioni o i componenti pi\u00f9 utilizzati. \u00c8 importante mantenere aggiornato il repository dei template, utilizzando l&#8217;ultima versione di <code>wp-scripts<\/code> e implementando tutti i miglioramenti del flusso di lavoro che deciderai di apportare.<\/p>\n<h3>Controllo delle versioni e collaborazione<\/h3>\n<p>Potete fare ancora di pi\u00f9 quando si tratta di <code>wp-scripts<\/code> e di lavorare con il controllo di versione. Spesso, per\u00f2, \u00e8 necessario implementare alcune pratiche tipiche per mantenere alta la qualit\u00e0 del codice:<\/p>\n<ul>\n<li>Includete <code>package.json<\/code> e <code>package-lock.json<\/code> nel controllo di versione. Questo assicura che tutti i membri del team utilizzino le stesse dipendenze.<\/li>\n<li>Assicuratevi di includere gli artefatti di compilazione come <strong>\/build<\/strong> e <strong>\/node_modules<\/strong> nel vostro file <code>.gitignore<\/code>.<\/li>\n<li>Assicuratevi di fare riferimento a tutti gli script di cui avete bisogno nel vostro file <code>package.json<\/code> prima di eseguire il commit.<\/li>\n<li>Prendete in considerazione l&#8217;utilizzo di un file <code>.nvmrc<\/code> per specificare la versione di Node.js corretta per il vostro progetto.<\/li>\n<\/ul>\n<p>Potreste scegliere di implementare degli <a href=\"https:\/\/kinsta.com\/it\/blog\/git-hook\/\">hook di pre-commit<\/a> attraverso strumenti come <a href=\"https:\/\/typicode.github.io\/husky\/\">Husky<\/a>. Questo \u00e8 un ottimo modo per eseguire un linter prima di ogni commit, solo per fare un esempio:<\/p>\n<pre><code class=\"language-json\">\u2026\n\"husky\": {\n    \"hooks\": {\n        \"pre-commit\": \"npm run lint:js && npm run lint:css\"\n    }\n}\n\u2026\n<\/code><\/pre>\n<p>In questo modo potete assicurarvi di eseguire automaticamente il lint e i test prima dei commit e dei push. \u00c8 un altro modo per mantenere la qualit\u00e0 del codice nel vostro team.<\/p>\n<h3>Integrazione continua e distribuzione continua (CI\/CD)<\/h3>\n<p>L&#8217;integrazione di <code>wp-scripts<\/code> nella vostra pipeline CI\/CD pu\u00f2 semplificare il processo di distribuzione di temi e plugin. <a href=\"https:\/\/kinsta.com\/it\/blog\/come-creare-una-pipeline-ci-cd\/\">GitHub Actions<\/a> \u00e8 solo uno dei modi per integrare la configurazione di <code>wp-scripts<\/code>.<\/p>\n<p>Il primo passo consiste nel creare un file di flusso di lavoro dedicato all&#8217;interno di una cartella <strong>workflow<\/strong> del vostro repo:<\/p>\n<pre><code class=\"language-json\">name: CI\/CD\n\non:\n  push:\n    branches: [ main ]\n  pull_request:\n    branches: [ main ]\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n    steps:\n    - uses: actions\/checkout@v2\n    - name: Use Node.js\n      uses: actions\/setup-node@v2\n      with:\n        node-version: '14'\n    - name: Cache dependencies\n      uses: actions\/cache@v2\n      with:\n        path: ~\/.npm\n        key: ${{ runner.OS }}-node-${{ hashFiles('**\/package-lock.json') }}\n    - name: Install dependencies\n      run: npm ci\n    - name: Run linters\n      run: |\n        npm run lint:js\n        npm run lint:css\n    - name: Run tests\n      run: npm run test\n    - name: Build\n      run: npm run build\n    - name: Deploy\n      if: github.ref == 'refs\/heads\/main'\n      run: |\n        # Add your deployment script here\n        # For example, using rsync to a remote server:\n        # rsync -avzc --delete .\/build\/ user@example.com:\/path\/to\/wp-content\/themes\/your-theme\/\n<\/code><\/pre>\n<p>La fase di distribuzione varia a seconda del vostro host. Potreste utilizzare rsync, integrare con servizi come <a href=\"https:\/\/www.deployhq.com\/\" target=\"_blank\" rel=\"noopener noreferrer\">DeployHQ<\/a> o <a href=\"https:\/\/kinsta.com\/partners\/buddy\/\">Buddy<\/a> o scegliere una <a href=\"https:\/\/kinsta.com\/it\/blog\/come-creare-una-pipeline-ci-cd\/#trigger-deployment-with-curl-in-cicd-pipeline\">semplice integrazione cURL<\/a>. Se la distribuzione richiede password o chiavi, dovete aggiungerle come segreti alle impostazioni del vostro repository GitHub.<\/p>\n<p>Questo flusso di lavoro esegue linters, test e build del progetto su ogni richiesta di push e pull. Soprattutto, esegue il deploy solo quando inviate le modifiche al branch principale.<\/p>\n<h3>Creare uno strumento personalizzato per l&#8217;interfaccia a riga di comando (CLI)<\/h3>\n<p>Se avete bisogno di strumenti personalizzati, <code>wp-scripts<\/code> pu\u00f2 aiutarvi. Ad esempio, potreste voler distribuire uno strumento CLI personalizzato che si adatti alle esigenze della vostra agenzia.<\/p>\n<p>In alcuni casi, il vostro strumento avr\u00e0 bisogno di alcune dipendenze:<\/p>\n<pre><code class=\"language-bash\">npm install @wordpress\/scripts commander chalk\n<\/code><\/pre>\n<p>In questo caso, <a href=\"https:\/\/www.npmjs.com\/package\/commander\" target=\"_blank\" rel=\"noopener noreferrer\">Commander<\/a> analizza gli argomenti della riga di comando e <a href=\"https:\/\/www.npmjs.com\/package\/chalk\" target=\"_blank\" rel=\"noopener noreferrer\">chalk<\/a> migliora la visualizzazione del testo in uscita.<\/p>\n<p>Da qui potete iniziare a codificare lo strumento sfruttando <code>wp-scripts<\/code>. Ecco un esempio di come dovrebbe apparire il file:<\/p>\n<pre><code class=\"language-js\">#!\/usr\/bin\/env node\nconst { program } = require('commander');\nconst { spawn } = require('child_process');\nconst path = require('path');\nconst chalk = require('chalk');\n\nconst wpScripts = path.resolve(__dirname, '.\/node_modules\/.bin\/wp-scripts');\n\nconst runWpScripts = (script, args) =&gt; {\n  console.log(chalk.blue(`Running wp-scripts ${script}...`));\n  const result = spawn(wpScripts, [script, ...args], { stdio: 'inherit' });\n  result.on('exit', (code) =&gt; {\n    if (code !== 0) {\n      console.log(chalk.red(`wp-scripts ${script} failed with code ${code}`));\n    }\n  });\n};\n\nprogram\n  .version('1.0.0')\n  .description('Custom WordPress development CLI for Agency XYZ');\n\nprogram\n  .command('build')\n  .description('Build the project')\n  .action(() =&gt; runWpScripts('build'));\n\nprogram\n  .command('start')\n  .description('Start the development server')\n  .action(() =&gt; runWpScripts('start'));\n\nprogram\n  .command('lint')\n  .description('Lint JavaScript and CSS files')\n  .action(() =&gt; {\n    runWpScripts('lint-js');\n    runWpScripts('lint-style');\n  });\n\nprogram\n  .command('test')\n  .description('Run unit tests')\n  .action(() =&gt; runWpScripts('test-unit-js'));\n\nprogram\n  .command('deploy')\n  .description('Deploy the project')\n  .action(() =&gt; {\n    console.log(chalk.green('Deploying project...'));\n    \/\/ Add your deployment logic here\n    \/\/ For example:\n    \/\/ spawn('rsync', ['-avz', 'build\/', 'user@server:\/path\/to\/wordpress\/wp-content\/themes\/your-theme\/']);\n  });\n\nprogram.parse(process.argv);\n<\/code><\/pre>\n<p>Aggiungendo il campo bin al file package.json potete rendere lo strumento CLI un eseguibile:<\/p>\n<pre><code class=\"language-js\">\u2026\n{\n  \"name\": \"agency-wp-cli\",\n  \"version\": \"1.0.0\",\n  \"bin\": {\n    \"agency-wp\": \".\/cli.js\"\n  },\n  \/\/ ... other fields\n}\n\u2026\n<\/code><\/pre>\n<p>Per collegare la CLI per un&#8217;installazione locale, potete semplicemente eseguire <code>npm link<\/code>. Ora potete testare la CLI nella vostra applicazione Terminale:<\/p>\n<pre><code class=\"language-bash\">agency-wp build\nagency-wp lint\nagency-wp deploy\n<\/code><\/pre>\n<p>Dovreste pubblicare lo strumento in un registro npm privato in modo che gli altri membri del team possano installarlo a loro piacimento:<\/p>\n<pre><code class=\"language-bash\">npm publish --registry=<a href=\"https:\/\/your-private-registry.com\">https:\/\/your-private-registry.com<\/a>\n<\/code><\/pre>\n<p>Quando ne avrete bisogno, dovrete solo eseguire <code>npm install --save-dev agency-wp-cli<\/code> per installare il vostro strumento. Da qui, potrete fare riferimento alla CLI all&#8217;interno di <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-js\">{\n  \"scripts\": {\n    \"build\": \"agency-wp build\",\n    \"start\": \"agency-wp start\",\n    \"lint\": \"agency-wp lint\",\n    \"test\": \"agency-wp test\",\n    \"deploy\": \"agency-wp deploy\"\n  }\n}\n<\/code><\/pre>\n<p>La creazione e l&#8217;utilizzo di uno strumento come questo garantisce che tutti i membri della vostra agenzia utilizzino gli stessi comandi e processi. Questo pu\u00f2 ridurre le incongruenze e snellire ulteriormente il flusso di lavoro dello sviluppo di WordPress.<\/p>\n<h3>Ottimizzazione delle prestazioni<\/h3>\n<p>Quando si gestiscono pi\u00f9 siti WordPress ad alto traffico, l&#8217;ottimizzazione delle prestazioni diventa fondamentale per i vostri risultati. Ci sono diverse tecniche avanzate che <code>wp-scripts<\/code> pu\u00f2 aiutarvi a implementare.<\/p>\n<h4>Splitting avanzato del codice<\/h4>\n<p>Ad esempio, lo splitting del codice permette di suddividere il vostro pacchetto JavaScript in parti pi\u00f9 piccole, che potete caricare su richiesta. Questo pu\u00f2 aumentare i tempi di caricamento iniziali, soprattutto per le applicazioni di grandi dimensioni.<\/p>\n<p>Per prima cosa, modificate il vostro file <code>webpack.config.js<\/code> per abilitare la suddivisione del codice:<\/p>\n<pre><code class=\"language-js\">const defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  entry: {\n    main: '.\/src\/index.js',\n    admin: '.\/src\/admin.js',\n  },\n  output: {\n    filename: '[name].js',\n    chunkFilename: '[name].[contenthash].js',\n  },\n  optimization: {\n    ...defaultConfig.optimization,\n    splitChunks: {\n      chunks: 'all',\n      minSize: 0,\n      cacheGroups: {\n        vendor: {\n          test: \/[\\\/]node_modules[\\\/]\/,\n          name(module) {\n            const packageName = module.context.match(\/[\\\/]node_modules[\\\/](.*?)([\\\/]|$)\/)[1];\n            return `vendor.${packageName.replace('@', '')}`;\n          },\n        },\n      },\n    },\n  },\n};\n<\/code><\/pre>\n<p>In tutto il vostro codice JavaScript, utilizzate le importazioni dinamiche per suddividerlo in parti pi\u00f9 piccole:<\/p>\n<pre><code class=\"language-js\">\/\/ Instead of: import { heavyFunction } from '.\/heavyModule';\n\nbutton.addEventListener('click', () =&gt; {\n  import('.\/heavyModule').then(module =&gt; {\n    module.heavyFunction();\n  });\n});\n<\/code><\/pre>\n<p>Inoltre, dovete mettere in coda ogni suddivisione all&#8217;interno dei vostri file WordPress:<\/p>\n<pre><code class=\"language-php\">function enqueue_split_scripts() {\n  $asset_file = include(get_template_directory() . '\/build\/index.asset.php');  \n\n  wp_enqueue_script('main', get_template_directory_uri() . '\/build\/main.js', $asset_file['dependencies'], $asset_file['version'], true);\n  wp_enqueue_script('admin', get_template_directory_uri() . '\/build\/admin.js', $asset_file['dependencies'], $asset_file['version'], true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_split_scripts');\n<\/code><\/pre>\n<p>Questo dovrebbe ridurre i tempi di caricamento e non richiede molto tempo per essere implementato.<\/p>\n<h4>Tree shaking<\/h4>\n<p>Nel contesto di JavaScript, il &#8220;tree shaking&#8221; \u00e8 il modo in cui ci si libera del codice inutilizzato. Sia <code>wp-scripts<\/code> che <code>webpack<\/code> eseguono il tree shaking per le build di produzione, ma potete ottimizzarlo ulteriormente. L&#8217;applicazione \u00e8 pi\u00f9 complessa di quella descritta qui, ma in ogni caso dovete assicurarvi di utilizzare la sintassi di importazione ed esportazione di ES6:<\/p>\n<pre><code class=\"language-php\">\/\/ Good for tree shaking\nexport function usedFunction() { \/* ... *\/ }\n\n\/\/ Bad for tree shaking\nmodule.exports = {\n  usedFunction: function() { \/* ... *\/ },\n};\n<\/code><\/pre>\n<p>Quindi, specificate i file con <a href=\"https:\/\/travislramos.com\/blog\/understanding-tree-shaking-in-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">&#8220;sideEffects&#8221;, effetti collaterali<\/a>&#8230;<\/p>\n<pre><code class=\"language-js\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": [\"*.css\", \"*.scss\"]\n}\n<\/code><\/pre>\n<p>&#8230; o contrassegnarli come privi di effetti collaterali:<\/p>\n<pre><code class=\"language-json\">{\n  \"name\": \"your-package\",\n  \"sideEffects\": false\n}\n<\/code><\/pre>\n<p>Alcune librerie pi\u00f9 grandi non supportano il tree shaking, cos\u00ec come altre pi\u00f9 piccole. In questi casi, sar\u00e0 necessario utilizzare un plugin specifico:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev babel-plugin-transform-imports\n<\/code><\/pre>\n<p>Questo significa che dovrete aggiornare anche i file di configurazione di babel per un&#8217;installazione ottimale e priva di errori.<\/p>\n<h4>Ottimizzazione delle risorse<\/h4>\n<p>Il processo di creazione di <code>wp-scripts<\/code> ridurr\u00e0 al minimo i file CSS e JavaScript, ma potete fare di pi\u00f9. Ad esempio, potete installare un plugin specifico per l&#8217;ottimizzazione delle immagini:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev imagemin-webpack-plugin\n<\/code><\/pre>\n<p>Una volta aggiunto al file di configurazione del webpack, potete utilizzare i suggerimenti sulle risorse aggiungendo il codice giusto al file <code>functions.php<\/code> o al file principale del plugin:<\/p>\n<pre><code class=\"language-php\">function add_resource_hints( $urls, $relation_type ) {\n  if ( 'preconnect' === $relation_type ) {\n    $urls[] = 'https:\/\/fonts.googleapis.com';\n    $urls[] = 'https:\/\/fonts.gstatic.com';\n  }\n  return $urls;\n}\n\nadd_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );\n<\/code><\/pre>\n<p>Un&#8217;attivit\u00e0 come questa mostra la flessibilit\u00e0 che avete con <code>wp-scripts<\/code>, in quanto potete adattarlo alle esigenze della vostra agenzia o del vostro progetto.<\/p>\n<h4>Analizzare le dimensioni del bundle<\/h4>\n<p>Capire la composizione del vostro bundle \u00e8 fondamentale per l&#8217;ottimizzazione. Con <code>wp-scripts<\/code>, potete renderlo pi\u00f9 semplice con il flag <code>--analyze<\/code>.<\/p>\n<pre><code class=\"language-bash\">npm run build -- --analyze\n<\/code><\/pre>\n<p>Il primo passo \u00e8 aggiungere lo script corrispondente al vostro file <code>package.json<\/code>:<\/p>\n<pre><code class=\"language-json\">{\n  \"scripts\": {\n    \"analyze\": \"wp-scripts build --analyze\"\n  }\n}\n<\/code><\/pre>\n<p>Una volta eseguito il comando <code>analyze<\/code>, questo generer\u00e0 un report che mostra le dimensioni di ogni modulo del vostro bundle. Questa semplice implementazione aiuta a identificare le aree da ottimizzare.<\/p>\n<h4>Implementare il critical CSS<\/h4>\n<p>Un critical CSS, o CSS critico, del sito \u00e8 il minimo indispensabile che la vostra pagina richiede per caricare i contenuti above the fold. L&#8217;inserimento di questo CSS in linea pu\u00f2 migliorare il tempo di caricamento percepito.<\/p>\n<p>Per ottenere questo risultato \u00e8 necessario il plugin <a href=\"https:\/\/www.npmjs.com\/package\/critical-css-webpack-plugin\" target=\"_blank\" rel=\"noopener noreferrer\">Critical CSS Webpack<\/a>:<\/p>\n<pre><code class=\"language-bash\">npm install --save-dev critical-css-webpack-plugin\n<\/code><\/pre>\n<p>Il prossimo passo consiste nell&#8217;aggiornare il file di configurazione di Webpack per fare riferimento al plugin:<\/p>\n<pre><code class=\"language-js\">const CriticalCssPlugin = require('critical-css-webpack-plugin');\nconst defaultConfig = require('@wordpress\/scripts\/config\/webpack.config');\n\nmodule.exports = {\n  ...defaultConfig,\n  plugins: [\n    ...defaultConfig.plugins,\n    new CriticalCssPlugin({\n      base: 'dist\/',\n      src: 'index.html',\n      target: 'styles\/critical.css',\n      extract: true,\n      inline: true,\n      minify: true,\n      dimensions: [\n        {\n          height: 500,\n          width: 300,\n        },\n        {\n          height: 900,\n          width: 1300,\n        },\n      ],\n    }),\n  ],\n};\n<\/code><\/pre>\n<p>Per poterlo usare, \u00e8 necessario aggiungere uno snippet al vostro file <code>header.php<\/code>:<\/p>\n<pre><code class=\"language-php\">&lt;style&gt;\n  &lt;?php echo file_get_contents(get_template_directory() . '\/build\/styles\/critical.css'); ?&gt;\n&lt;\/style&gt;\n<\/code><\/pre>\n<p>Questo strumento essenzialmente estrae e inserisce in linea i CSS critici per un rendering iniziale pi\u00f9 veloce. Genera CSS critici per dimensioni specifiche del viewport, migliorando cos\u00ec il tempo di caricamento percepito dei vostri temi.<\/p>\n<h2>Riepilogo<\/h2>\n<p>Per lo sviluppo di un&#8217;agenzia, <code>wp-scripts<\/code> pu\u00f2 essere un potente strumento in grado di migliorare significativamente il flusso di lavoro per i progetti di temi e plugin. Fornendo un processo di creazione standardizzato, un supporto JavaScript moderno e strumenti di test e linting integrati, <code>wp-scripts<\/code> permette di concentrarvi sulla creazione di progetti WordPress di alta qualit\u00e0 automatizzando alcune delle attivit\u00e0 pi\u00f9 importanti.<\/p>\n<p>Sfruttare <code>wp-scripts<\/code> non aiuta solo a stare al passo con le moderne pratiche di sviluppo. \u00c8 un modo per posizionarvi all&#8217;avanguardia nello sviluppo di WordPress, pronti ad affrontare le sfide e le opportunit\u00e0 che la vostra agenzia deve affrontare.<\/p>\n<p>wp-scripts offre le funzionalit\u00e0 e la portata di cui avete bisogno per i progetti di sviluppo della vostra agenzia? Condividete con noi i vostri pensieri nella sezione commenti qui sotto!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il lavoro di sviluppo di WordPress per le agenzie pu\u00f2 essere competitivo nel migliore dei casi. Richiede un&#8217;efficienza e una coerenza straordinarie per i progetti di &#8230;<\/p>\n","protected":false},"author":259,"featured_media":79841,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[26284,25878,25869,25873],"class_list":["post-79840","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-agenzie","topic-design-sito-wordpress","topic-prestazioni-wordpress","topic-sviluppo-wordpress"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Sviluppo avanzato di WordPress con wp-scripts<\/title>\n<meta name=\"description\" content=\"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l&#039;uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts\" \/>\n<meta property=\"og:description\" content=\"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l&#039;uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-12-02T09:22:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-12-10T14:29:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1470\" \/>\n\t<meta property=\"og:image:height\" content=\"735\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Steve Bonisteel\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l&#039;uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png\" \/>\n<meta name=\"twitter:creator\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Steve Bonisteel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"27 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\"},\"author\":{\"name\":\"Steve Bonisteel\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\"},\"headline\":\"Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts\",\"datePublished\":\"2024-12-02T09:22:53+00:00\",\"dateModified\":\"2024-12-10T14:29:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\"},\"wordCount\":3917,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\",\"name\":\"Sviluppo avanzato di WordPress con wp-scripts\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"datePublished\":\"2024-12-02T09:22:53+00:00\",\"dateModified\":\"2024-12-10T14:29:26+00:00\",\"description\":\"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l'uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png\",\"width\":1470,\"height\":735},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design del Sito WordPress\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f\",\"name\":\"Steve Bonisteel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g\",\"caption\":\"Steve Bonisteel\"},\"description\":\"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/stevebonisteel\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Sviluppo avanzato di WordPress con wp-scripts","description":"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l'uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/","og_locale":"it_IT","og_type":"article","og_title":"Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts","og_description":"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l'uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!","og_url":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2024-12-02T09:22:53+00:00","article_modified_time":"2024-12-10T14:29:26+00:00","og_image":[{"width":1470,"height":735,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","type":"image\/png"}],"author":"Steve Bonisteel","twitter_card":"summary_large_image","twitter_description":"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l'uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package-1024x512.png","twitter_creator":"@Kinsta_IT","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Steve Bonisteel","Tempo di lettura stimato":"27 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/"},"author":{"name":"Steve Bonisteel","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f"},"headline":"Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts","datePublished":"2024-12-02T09:22:53+00:00","dateModified":"2024-12-10T14:29:26+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/"},"wordCount":3917,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/","url":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/","name":"Sviluppo avanzato di WordPress con wp-scripts","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","datePublished":"2024-12-02T09:22:53+00:00","dateModified":"2024-12-10T14:29:26+00:00","description":"Lo sviluppo di WordPress richiede strumenti di alto livello. Qui vediamo l'uso di wp-script e le tecniche di compilazione, linting, test e altro ancora!","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2024\/12\/advanced-wordpress-development-with-the-wordpress-scripts-package.png","width":1470,"height":735},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/sviluppo-wp-scripts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Design del Sito WordPress","item":"https:\/\/kinsta.com\/it\/argomenti\/design-sito-wordpress\/"},{"@type":"ListItem","position":3,"name":"Sviluppo avanzato di WordPress: come costruire un progetto con wp-scripts"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/d84ceff87bd64a4368a581fc8aa8bd6f","name":"Steve Bonisteel","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/0adffb3f9c86a6ec8245f8399d540823?s=96&d=mm&r=g","caption":"Steve Bonisteel"},"description":"Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.","url":"https:\/\/kinsta.com\/it\/blog\/author\/stevebonisteel\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79840","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/259"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=79840"}],"version-history":[{"count":5,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79840\/revisions"}],"predecessor-version":[{"id":79847,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/79840\/revisions\/79847"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/translations\/es"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/79840\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/79841"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=79840"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=79840"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=79840"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}