{"id":229007,"date":"2022-10-15T18:28:00","date_gmt":"2022-10-15T15:28:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229007"},"modified":"2022-11-09T05:09:52","modified_gmt":"2022-11-09T02:09:52","slug":"estensione-del-webpack-crea-script-di-blocco-di-wordpress-config","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/estensione-del-webpack-crea-script-di-blocco-di-wordpress-config\/","title":{"rendered":"Estensione del webpack Crea script di blocco di WordPress Config"},"content":{"rendered":"\n<p>Con il supporto ufficiale del team di WordPress Editor (Gutenberg), ora puoi iniziare rapidamente a utilizzare un plug-in di blocco utilizzando <a href=\"https:\/\/wholesomecode.ltd\/articles\/an-overview-of-the-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPress Create Block Script<\/a> (<code>@wordpress\/create-block<\/code>pacchetto npm).<\/p>\n<p><strong>Questo articolo \u00e8 per una versione precedente di Crea script di blocco<\/strong><\/p>\n<p>Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere pi\u00f9 compatibili con l&#8217;ultimo script create block. \u00c8 possibile <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui<\/a>.<\/p>\n<p>Abbiamo anche una guida aggiornata <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">sull&#8217;aggiunta di punti di ingresso aggiuntivi al webpack<\/a>.<\/p>\n<p>In questo articolo esploriamo come aggiungere una personalizzazione <code>webpack.config<\/code>per espandere la <code>wp-scripts<\/code>funzionalit\u00e0 di compilazione del blocco generato dal blocco.<\/p>\n<p>Con questo possiamo espandere <code>npm start<\/code>il comando per eseguire attivit\u00e0 aggiuntive. In questo caso configureremo il plugin per compilare Sass( <code>sass<\/code>, <code>scss<\/code>) in <code>css<\/code>.<\/p>\n<p>Compileremo il Sass dalla <code>\/src<\/code>cartella nei file <code>style.css<\/code>e <code>editor.css<\/code>nella radice del plugin.<\/p>\n<h2>Crea i nostri file Sass<\/h2>\n<p>La prima cosa che faremo \u00e8 creare una nuova cartella in <code>\/src\/scss<\/code>. Qui aggiungeremo due file:<\/p>\n<ul>\n<li><code>\/src\/scss\/editor.scss<\/code><\/li>\n<li><code>\/src\/scss\/style.scss<\/code><\/li>\n<\/ul>\n<p>Copieremo i file <code>css<\/code>da <code>\/editor.css<\/code>e <code>\/style.css<\/code>nei file appena creati.<\/p>\n<p>Quindi elimineremo i file <code>\/editor.css<\/code>e <code>\/style.css<\/code>.<\/p>\n<p>File SCSS e la nuova struttura delle cartelle.<\/p>\n<h3>Importa il Sass in<code>\/src\/index.js<\/code><\/h3>\n<p>Nella parte superiore del tuo <code>\/src\/index.js<\/code>aggiungi le seguenti affermazioni:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>Ci\u00f2 consentir\u00e0 al webpack di prelevare i <code>.scss<\/code>file in modo che possano essere elaborati.<\/p>\n<p>Importando in questo modo il Sass nella parte superiore del nostro file, ci consentir\u00e0 di <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">compilare il Sass per pi\u00f9 blocchi all&#8217;interno dello stesso plugin in un unico file<\/a>. In questo caso compiler\u00e0 il Sass in singoli <code>\/editor.css<\/code>e <code>\/style.css<\/code>file per l&#8217;intero plugin.<\/p>\n<h2>Imposta il<code>webpack.config<\/code><\/h2>\n<p>Crea un nuovo file nella radice del plugin chiamato <code>\/webpack.config.js<\/code>. Copia il seguente codice in quel file:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n        ]\n    }\n};\n<\/code><\/pre>\n<p>Ora nel tuo terminale inserisci il seguente comando <code>cd<\/code>&#8216;ed nella radice del plugin:<\/p>\n<p>Il plugin dovrebbe compilare il JavaScript nella cartella build normalmente.<\/p>\n<h3>Installazione di un pacchetto per compilare Sass<\/h3>\n<p>Utilizzeremo il <a href=\"https:\/\/www.npmjs.com\/package\/mini-css-extract-plugin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>mini-css-extract-plugin<\/code>pacchetto npm<\/a> per creare <code>.css<\/code>file dal nostro Sass, per fare ci\u00f2 abbiamo anche bisogno di un paio di pacchetti aggiuntivi per elaborare <code>.scss<\/code>prima i file in CSS.<\/p>\n<p>Installeremo il <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>pacchetto npm<\/a>, per permetterci di compilare CSS in Sass. questo ha una dipendenza di <code>node-scss<\/code>.<\/p>\n<p>Installeremo anche il <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>pacchetto npm<\/a> per permetterci di gestire <code>@import<\/code>le istruzioni nel CSS.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>Ora estendi il <code>\/webpack.config.js<\/code>file in modo che appaia come segue:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n<\/code><\/pre>\n<p>Sulla riga 2 abbiamo importato il <code>mini-css-extract-plugin<\/code>, sulla riga 20 l&#8217;abbiamo dichiarato come plugin e passato <code>..\/[name].css<\/code>come <code>filename<\/code>. Ci\u00f2 significa che il file compilato verr\u00e0 aggiunto alla radice del plugin.<\/p>\n<p>Alla riga 10 abbiamo passato un oggetto che ha un <code>test<\/code>parametro, che usa una regex per indicare il tipo di file che stiamo controllando e un <code>use<\/code>parametro.<\/p>\n<p>Il <code>use<\/code>parametro contiene un array di tutti i plugin che applicheremo per quel test. Esegue i plugin dalla parte inferiore dell&#8217;elenco, terminando in alto.<\/p>\n<p>Ora, se lo eseguiamo <code>npm start<\/code>, produrr\u00e0 un <code>.css<\/code>file nella radice del plugin.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"Estensione del webpack Crea script di blocco di WordPress Config\" \/>Generazione di un file CSS.<\/p>\n<p>Osservando la struttura dei file abbiamo due file aggiuntivi:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Riceviamo anche un paio di file JavaScript nella <code>\/build<\/code>cartella, ma spiegher\u00f2 come gestirli in seguito).<\/p>\n<p>Il <code>.map<\/code>file \u00e8 un puntatore che indica alla tua console JavaScript in quale file alcuni CSS o Sass sono stati originariamente definiti e aiuta con il debug.<\/p>\n<p>Esaminando il <code>\/index.css<\/code>file, contiene il codice di entrambi i file <code>\/src\/scss\/editor.scss<\/code>e <code>\/src\/scss\/style.scss<\/code>.<\/p>\n<p>Questo non \u00e8 ci\u00f2 che vogliamo, poich\u00e9 i file di stile ed editor sono accodati separatamente nel nostro file php dei plugin.<\/p>\n<h3>Dividere il file CSS<\/h3>\n<p>Per dividere questo <code>\/index.css<\/code>file dobbiamo sfruttare l&#8217; <code>optimization.splitChunks<\/code>oggetto del webpack 4. Per ulteriori informazioni sulla sua configurazione, leggere la <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">pagina della documentazione di splitChunks<\/a>.<\/p>\n<p>Aggiungi quanto segue al tuo <code>\/webpack.config.js<\/code>file:<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        splitChunks: {\n            cacheGroups: {\n                  default: false,\n                editor: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'style',\n                    test: \/style.s[ac]ss$\/i,\n                },\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n<\/code><\/pre>\n<p>Elimina i file generati in precedenza e la cartella build ed esegui <code>npm start<\/code>.<\/p>\n<p>Ora otteniamo i seguenti file:<\/p>\n<ul>\n<li><code>\/build\/editor.js<\/code><\/li>\n<li><code>\/build\/editor.js.map<\/code><\/li>\n<li><code>\/build\/style.js<\/code><\/li>\n<li><code>\/build\/style.js.map<\/code><\/li>\n<li><code>\/editor.css<\/code><\/li>\n<li><code>\/editor.css.map<\/code><\/li>\n<li><code>\/style.css<\/code><\/li>\n<li><code>\/style.css.map<\/code><\/li>\n<\/ul>\n<p>Guardando <code>\/editor.css<\/code>e <code>\/style.css<\/code>questi sono stati generati correttamente e contengono il codice che vogliamo!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"Estensione del webpack Crea script di blocco di WordPress Config\" \/>Generazione dell&#8217;editor e dei file CSS di stile.<\/p>\n<p>I file nella <code>\/build<\/code>cartella non sono necessari per la nostra configurazione, esplorer\u00f2 come rimuoverli in seguito.<\/p>\n<h3>Rimozione di file indesiderati<\/h3>\n<p>Per rimuovere i file indesiderati utilizzeremo il <a href=\"https:\/\/www.npmjs.com\/package\/ignore-emit-webpack-plugin\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>ignore-emit-webpack-plugin<\/code>pacchetto npm<\/a>.<\/p>\n<p>Questo plugin impedisce al webpack di produrre (o &quot;emettere&quot; determinati file).<\/p>\n<p>Installa il pacchetto npm con il comando da terminale:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>Modifica il tuo <code>\/webpack.config.js<\/code>file per includere la configurazione per il plug-in Ignore Emit webpack.<\/p>\n<pre><code>const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\n\nmodule.exports = {\n    ...defaultConfig,\n    module: {\n        ...defaultConfig.module,\n        rules: [\n            ...defaultConfig.module.rules,\n            {\n                test: \/.s[ac]ss$\/i,\n                use: [\n                    { loader: MiniCssExtractPlugin.loader },\n                    { loader: 'css-loader' },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        splitChunks: {\n            cacheGroups: {\n                  default: false,\n                editor: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\n                      enforce: true,\n                    name: 'style',\n                    test: \/style.s[ac]ss$\/i,\n                },\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n    ],\n};\n<\/code><\/pre>\n<p>Nota i nuovi riferimenti alla riga 2, che include il plug-in Ignore Emit, e alla riga 41 che indica al plug-in quali file non emettere.<\/p>\n<p>Ora quando eseguiamo <code>npm start<\/code>(dopo aver eliminato la <code>\/build<\/code>cartella) i file <code>\/build\/editor.js<\/code>, <code>\/build\/editor.js.map<\/code>, <code>\/build\/style.js<\/code>e <code>\/build\/style.js.map<\/code>non vengono pi\u00f9 creati.<\/p>\n<h3>Uscita di sola produzione<\/h3>\n<p>Se vogliamo avere solo l&#8217;output del prodotto ed escludere i <code>.map<\/code>file, possiamo semplicemente passare <code>devtool: false<\/code>come parametro nel nostro <code>module.exports<\/code>oggetto e questo impedir\u00e0 la <code>.map<\/code>generazione dei file.<\/p>\n<p>Poich\u00e9 desideriamo che questi file vengano esclusi solo su un server di produzione, possiamo controllare l&#8217; <code>process.env.NODE_ENV<\/code>impostazione per vedere su cosa \u00e8 impostato il nostro ambiente corrente e passare <code>devtool: false<\/code>se l&#8217;ambiente \u00e8 impostato su produzione.<\/p>\n<p>Per fare ci\u00f2, aggiungi quanto segue all&#8217;inizio del nostro <code>\/webpack.config.js<\/code>file:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>Quindi aggiungi quanto segue in fondo al file:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Se il <code>npm start<\/code>comando viene eseguito e l&#8217;ambiente del nodo non \u00e8 impostato su produzione, i <code>.map<\/code>file non verranno creati.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte di registrazione:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Con il supporto ufficiale del team di WordPress Editor (Gutenberg), ora puoi iniziare rapidamente a utilizzare un plug-in di blocco utilizzando WordPress Create Block Script (@wordpress\/cre&#8230;<\/p>\n","protected":false},"author":1,"featured_media":221243,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[918,896,720,844,865],"tags":[1168],"class_list":["post-229007","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-altro","category-codice","category-sviluppatore","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229007","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=229007"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/229007\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=229007"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=229007"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=229007"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}