{"id":228987,"date":"2022-10-15T14:55:00","date_gmt":"2022-10-15T11:55:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228987"},"modified":"2022-11-09T05:04:53","modified_gmt":"2022-11-09T02:04:53","slug":"configurazione-aggiuntiva-per-il-pacchetto-web","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/configurazione-aggiuntiva-per-il-pacchetto-web\/","title":{"rendered":"Configurazione aggiuntiva per il pacchetto web"},"content":{"rendered":"\n

Questo articolo si basa sul webpack.config.js<\/code>file che abbiamo creato nell’articolo Estensione del pacchetto Web WordPress Create Block Script Config<\/a>. Se non hai letto quell’articolo, potresti volerlo leggere velocemente.<\/p>\n

Questo articolo \u00e8 per una versione precedente di Crea script di blocco<\/strong><\/p>\n

Sebbene la teoria possa ancora essere applicata, alcune delle informazioni in questo articolo potrebbero non essere pi\u00f9 compatibili con l’ultimo script create block. \u00c8 possibile visualizzare la nostra Guida allo script per la creazione di blocchi aggiornata qui<\/a>.<\/p>\n

Abbiamo anche una guida aggiornata sull’aggiunta di punti di ingresso aggiuntivi al webpack<\/a>.<\/p>\n

Supporto CSS Cross Browser con Polyfill e Prefissi<\/h2>\n

Prima di entrare, voglio dare credito a Jeffrey Carandang<\/a> per il suo fantastico articolo sull’uso di PostCSS con webpack<\/a>, per il quale ho preso ispirazione per questa sezione dell’articolo.<\/p>\n

Per supportare i polyfill e i prefissi Cross-Browser useremo il postcss-loader<\/code>pacchetto npm per caricare il plugin [postcss-preset-env](https:\/\/www.npmjs.com\/package\/postcss-preset-env)<\/code>.<\/p>\n

Assicurandoci di essere cd<\/code>‘ed nella radice del nostro plugin, eseguire quanto segue per installare questi due pacchetti.<\/p>\n

npm install postcss-loader postcss-preset-env --save-dev\n<\/code><\/pre>\n
Successivamente dobbiamo estendere il nostro \/webpack.config.js<\/code>per includere la configurazione per questi due pacchetti:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\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                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins:() => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        splitChunks: {\n            cacheGroups: {\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                default: false,\n            },\n        },\n    },\n    plugins: [\n        ...defaultConfig.plugins,\n        new MiniCssExtractPlugin( {\n            filename: '..\/[name].css',\n        } ),\n        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),\n    ],\n};\n\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
Notare le modifiche alle righe 4 e 18.<\/p>\n
Testare il prefissore automatico<\/h3>\n
Aggiungiamo del codice al nostro \/src\/sass\/style.scss<\/code>file per testare la funzione di prefisso automatico del plug-in PostCSS. Inserir\u00f2 alcune regole per ::placeholder<\/code>nel file, che non ha ancora il pieno supporto del browser.<\/p>\n
::placeholder {\n    color: #f00;\n}\n<\/code><\/pre>\n
Nel nostro file compilato \/style.css<\/code>viene ora emesso quanto segue:<\/p>\n
::-webkit-input-placeholder {\n  color: #f00; }\n\n::-moz-placeholder {\n  color: #f00; }\n\n:-ms-input-placeholder {\n  color: #f00; }\n\n::-ms-input-placeholder {\n  color: #f00; }\n\n::placeholder {\n  color: #f00; }\n<\/code><\/pre>\n
Testare i Polyfill<\/h3>\n
Aggiungiamo del codice al nostro \/src\/sass\/style.scss<\/code>file per testare la funzione polyfill del plugin PostCSS. Inserir\u00f2 alcune regole per la all<\/code>propriet\u00e0 (che ripristina le propriet\u00e0 di un elemento) nel file, che non ha ancora il supporto completo del browser.<\/p>\n
Nel nostro file compilato \/style.css<\/code>viene ora emesso quanto segue:<\/p>\n
a {\n  -webkit-animation: none 0s ease 0s 1 normal none running;\n          animation: none 0s ease 0s 1 normal none running;\n  -webkit-backface-visibility: visible;\n          backface-visibility: visible;\n  background: transparent none repeat 0 0 \/ auto auto padding-box border-box scroll;\n  border: medium none currentColor;\n  border-collapse: separate;\n  -o-border-image: none;\n     border-image: none;\n  border-radius: 0;\n  border-spacing: 0;\n  bottom: auto;\n  box-shadow: none;\n  box-sizing: content-box;\n  caption-side: top;\n  clear: none;\n  clip: auto;\n  color: #000;\n  -webkit-columns: auto;\n     -moz-columns: auto;\n          columns: auto;\n  -webkit-column-count: auto;\n     -moz-column-count: auto;\n          column-count: auto;\n  -webkit-column-fill: balance;\n     -moz-column-fill: balance;\n          column-fill: balance;\n  grid-column-gap: normal;\n  -webkit-column-gap: normal;\n     -moz-column-gap: normal;\n          column-gap: normal;\n  -webkit-column-rule: medium none currentColor;\n     -moz-column-rule: medium none currentColor;\n          column-rule: medium none currentColor;\n  -webkit-column-span: 1;\n     -moz-column-span: 1;\n          column-span: 1;\n  -webkit-column-width: auto;\n     -moz-column-width: auto;\n          column-width: auto;\n  content: normal;\n  counter-increment: none;\n  counter-reset: none;\n  cursor: auto;\n  direction: ltr;\n  display: inline;\n  empty-cells: show;\n  float: none;\n  font-family: serif;\n  font-size: medium;\n  font-style: normal;\n  font-feature-settings: normal;\n  font-variant: normal;\n  font-weight: normal;\n  font-stretch: normal;\n  line-height: normal;\n  height: auto;\n  -webkit-hyphens: none;\n      -ms-hyphens: none;\n          hyphens: none;\n  left: auto;\n  letter-spacing: normal;\n  list-style: disc outside none;\n  margin: 0;\n  max-height: none;\n  max-width: none;\n  min-height: 0;\n  min-width: 0;\n  opacity: 1;\n  orphans: 2;\n  outline: medium none invert;\n  overflow: visible;\n  overflow-x: visible;\n  overflow-y: visible;\n  padding: 0;\n  page-break-after: auto;\n  page-break-before: auto;\n  page-break-inside: auto;\n  perspective: none;\n  perspective-origin: 50% 50%;\n  position: static;\n  right: auto;\n  -moz-tab-size: 8;\n    -o-tab-size: 8;\n       tab-size: 8;\n  table-layout: auto;\n  text-align: left;\n  -moz-text-align-last: auto;\n       text-align-last: auto;\n  text-decoration: none;\n  text-indent: 0;\n  text-shadow: none;\n  text-transform: none;\n  top: auto;\n  transform: none;\n  transform-origin: 50% 50% 0;\n  transform-style: flat;\n  transition: none 0s ease 0s;\n  unicode-bidi: normal;\n  vertical-align: baseline;\n  visibility: visible;\n  white-space: normal;\n  widows: 2;\n  width: auto;\n  word-spacing: normal;\n  z-index: auto;\n  all: initial; }\n<\/code><\/pre>\n
Questo \u00e8 un sacco di CSS!<\/p>\n
Minimizzare l’output<\/h2>\n
Possiamo caricare le nostre risorse JavaScript e CSS pi\u00f9 rapidamente assicurandoci che siano minimizzate. Per fare ci\u00f2 possiamo aggiungere un paio di plugin extra nella nostra build.<\/p>\n
Minimizzare CSS con webpack<\/h3>\n
Per minimizzare i CSS useremo il optimize-css-assets-webpack-plugin<\/code>pacchetto npm<\/a>.<\/p>\n
Assicurati di essere cd<\/code>‘ed nella radice del tuo plugin ed esegui il seguente comando nel tuo terminale:<\/p>\n
npm install optimize-css-assets-webpack-plugin --save-dev\n<\/code><\/pre>\n
Ora apporta le seguenti modifiche al tuo \/webpack.config.js<\/code>file:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\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                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins:() => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        minimize: true,\n        minimizer: [ new OptimizeCssAssetsWebpackPlugin() ],\n        splitChunks: {\n            cacheGroups: {\n                  default: false,\n                editor: {\n                    chunks: 'all',\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',                   \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\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
Nota l’importazione sulla riga 4, dicendo al webpack di ridurre a icona sulla riga 32 e il plug-in viene caricato sulla riga 33.<\/p>\n
Ora, quando eseguiamo npm start<\/code>, possiamo esaminare uno dei nostri file CSS nella radice del plugin per vedere l’output. Ecco \/style.css<\/code>come appare ora:<\/p>\n
.wp-block-wcltd-wholesome-notes{background-color:#000;color:#fff;padding:2px}\n<\/code><\/pre>\n
Ha rimosso tutti i commenti, gli spazi e ha messo tutto su una riga, riducendo le dimensioni del file.<\/p>\n
Minimizzare JavaScript con webpack<\/h3>\n
Se diamo un’occhiata al \/build\/index.js<\/code>file, \u00e8 piuttosto lungo. Questo file potrebbe anche fare con una minimizzazione.<\/p>\n
Per fare questo useremo il terser-webpack-plugin<\/code>pacchetto npm<\/a>.<\/p>\n
Assicurati di essere cd<\/code>‘ed nella radice del tuo plugin ed esegui il seguente comando nel tuo terminale:<\/p>\n
npm install terser-webpack-plugin  --save-dev\n<\/code><\/pre>\n
Ora apporta le seguenti modifiche al tuo \/webpack.config.js<\/code>file:<\/p>\n
const defaultConfig = require( '@wordpress\/scripts\/config\/webpack.config' );\nconst IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );\nconst MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );\nconst OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');\nconst postcssPresetEnv = require( 'postcss-preset-env' );\nconst production = 'development' !== process.env.NODE_ENV;\nconst TerserWebPackPlugin = require( 'terser-webpack-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                    {\n                        loader: 'postcss-loader',\n                        options: {\n                            plugins: () => [ postcssPresetEnv( { stage: 3 }) ],\n                        },\n                    },\n                    { loader: 'sass-loader' },\n                ],\n            },\n        ],\n    },\n    optimization: {\n        ...defaultConfig.optimization,\n        minimize: true,\n        minimizer: [ \n            new OptimizeCssAssetsWebpackPlugin(),\n            new TerserWebPackPlugin(),\n        ],\n        splitChunks: {\n            cacheGroups: {\n                default: false,\n                editor: {\n                    chunks: 'all',\n                    name: 'editor',\n                    test: \/editor.s[ac]ss$\/i,\n                },\n                style: {\n                    chunks: 'all',\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\nif (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n
Notare l’importazione alla riga 7 e l’aggiunta al minimizzatore alla riga 36.<\/p>\n
Ora, se ispezioniamo il nostro \/build\/index.js<\/code>file, JavaScript \u00e8 stato minimizzato.<\/p>\n
Minimizzare il JavaScript<\/p>\n
Ottieni il prefisso e la minimizzazione Gist<\/h3>\n
Puoi scaricare il file polyfill e minification \/webpack.config.js<\/code>e i file di accompagnamento \/package.json<\/code>da GitHub gist<\/a>.<\/p>\n
La configurazione finita contiene anche alcuni extra bonus. Ecco una rapida panoramica di ciascuno.<\/p>\n
Elimina e riordina automaticamente i tuoi CSS<\/h3>\n
Puoi formattare, riparare automaticamente e riordinare il tuo Sass mentre procedi, per fare ci\u00f2 installa i seguenti pacchetti:<\/p>\n
npm install stylelint stylelint-config-standard stylelint-order stylelint-webpack-plugin --save-dev\n<\/code><\/pre>\n
Salva anche il seguente file nella tua configurazione con il nome .stylelintrc<\/code>. Questo eredita le impostazioni predefinite fornite da stylelint-config-standard<\/code>e aggiunge alcuni extra bonus, incluso l’ordine alfabetico.<\/p>\n
Puoi configurare questo file in base alle tue preferenze utilizzando la guida nella documentazione di Styleline<\/a>.<\/p>\n
{\n    \"extends\": \"stylelint-config-standard\",\n    \"plugins\": [\n        \"stylelint-order\"\n    ],\n    \"rules\": {\n        \"color-hex-length\": \"long\",\n        \"font-family-name-quotes\": null,\n        \"function-url-quotes\": \"always\",\n        \"indentation\": \"tab\",\n        \"max-empty-lines\": 2,\n        \"number-leading-zero\": \"never\",\n        \"order\/order\": [\n            \"custom-properties\",\n            \"declarations\"\n        ],\n        \"order\/properties-alphabetical-order\": true,\n        \"string-quotes\": \"single\",\n    }\n}\n<\/code><\/pre>\n
Ora nel tuo \/src\/editor.scss<\/code>file rendi un po’ disordinato il tuo Sass e aggiungi un paio di regole di test, in questo modo:<\/p>\n
.wp-block-wcltd-wholesome-notes{\n  border: 1px dotted #f00; background: url(\"https:\/\/via.placeholder.com\/150\");}\n<\/code><\/pre>\n
Ora, quando npm start<\/code>esegui il salvataggio, verr\u00e0 automaticamente ordinato e alfabetizzato in questo modo:<\/p>\n
.wp-block-wcltd-wholesome-notes {\n    background: url('https:\/\/via.placeholder.com\/150');\n    border: 1px dotted #ff0000;\n}\n<\/code><\/pre>\n
Nota che alcune delle regole che ho aggiunto nel mio .stylelintrc<\/code>file sono state implementate, come ad esempio:<\/p>\n