{"id":228292,"date":"2022-10-15T18:13:00","date_gmt":"2022-10-15T15:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228292"},"modified":"2022-11-09T01:43:32","modified_gmt":"2022-11-08T22:43:32","slug":"wordpressi-loo-block-scripti-veebipaketi-konfiguratsiooni-laiendamine","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-loo-block-scripti-veebipaketi-konfiguratsiooni-laiendamine\/","title":{"rendered":"WordPressi Loo Block Scripti veebipaketi konfiguratsiooni laiendamine"},"content":{"rendered":"\n<p>WordPressi redigeerija (Gutenbergi) meeskonna ametliku toega saate n\u00fc\u00fcd plokkpluginaga kiiresti k\u00e4ivitada ja k\u00e4ivitada, kasutades <a href=\"https:\/\/wholesomecode.ltd\/articles\/an-overview-of-the-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">WordPressi ploki skripti loomise<\/a> (<code>@wordpress\/create-block<\/code>npm pakett) abil.<\/p>\n<p><strong>See artikkel on m\u00f5eldud ploki skripti loomise vanemale versioonile<\/strong><\/p>\n<p>Kuigi teooriat saab endiselt rakendada, ei pruugi osa selles artiklis sisalduvast teabest enam uusima loomisploki skriptiga \u00fchilduda. <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Meie uuendatud plokiskripti loomise juhendit<\/a> saate vaadata siit .<\/p>\n<p>Meil on ka uuendatud juhend <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">veebipakki t\u00e4iendavate sisenemispunktide lisamise kohta<\/a>.<\/p>\n<p>Selles artiklis uurime, kuidas saate lisada kohandatud ploki loodud ploki kompileerimisfunktsiooni <code>webpack.config<\/code>laiendamiseks .<code>wp-scripts<\/code><\/p>\n<p>Selle abil saame laiendada <code>npm start<\/code>k\u00e4sku, et k\u00e4ivitada t\u00e4iendavaid \u00fclesandeid. Sel juhul konfigureerime plugina Sassi (<code>sass<\/code>, <code>scss<\/code>) kompileerimiseks <code>css<\/code>.<\/p>\n<p>Kompileerime Sassi <code>\/src<\/code>kaustast pistikprogrammi juurtes olevatesse <code>style.css<\/code>ja failidesse.<code>editor.css<\/code><\/p>\n<h2>Looge meie Sassi faile<\/h2>\n<p>Esimese asjana loome uue kausta aadressil <code>\/src\/scss<\/code>. Siia lisame kaks faili:<\/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>Kopeerime <code>css<\/code>ja <code>\/editor.css<\/code>failid <code>\/style.css<\/code>vastloodud failidesse.<\/p>\n<p>Seej\u00e4rel kustutame failid <code>\/editor.css<\/code>ja .<code>\/style.css<\/code><\/p>\n<p>SCSS-failid ja uus kaustastruktuur.<\/p>\n<h3>Importige Sass sisse<code>\/src\/index.js<\/code><\/h3>\n<p>Lisage oma \u00fclaossa <code>\/src\/index.js<\/code>j\u00e4rgmised avaldused:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>See v\u00f5imaldab veebipaketil <code>.scss<\/code>failid \u00fcles korjata, et neid saaks t\u00f6\u00f6delda.<\/p>\n<p>Sel viisil faili \u00fclaosas oleva Sassi importimine v\u00f5imaldab meil <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">kompileerida Sassi sama pistikprogrammi mitme ploki jaoks \u00fcheks failiks<\/a>. Sel juhul kompileerib see Sassi \u00fcheksaks <code>\/editor.css<\/code>ja <code>\/style.css<\/code>failiks kogu pistikprogrammi jaoks.<\/p>\n<h2>Seadistage<code>webpack.config<\/code><\/h2>\n<p>Looge pistikprogrammi juurtes uus fail nimega <code>\/webpack.config.js<\/code>. Kopeerige sellesse faili j\u00e4rgmine kood:<\/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>N\u00fc\u00fcd sisestage oma terminalis <code>cd<\/code>plugina juure j\u00e4rgmine k\u00e4sk:<\/p>\n<p>Pistikprogramm peaks tavap\u00e4raselt JavaScripti ehituskausta kompileerima.<\/p>\n<h3>Sassi kompileerimiseks paketi installimine<\/h3>\n<p>Kavatseme oma Sassist failide loomiseks kasutada <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>paketti npm<\/a><code>.css<\/code>, selleks vajame ka paari lisapaketti, et <code>.scss<\/code>failid esmalt CSS-i t\u00f6\u00f6delda.<\/p>\n<p>Installime <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>paketi npm<\/a>, mis v\u00f5imaldab meil kompileerida CSS-i Sassile. sellel on s\u00f5ltuvus <code>node-scss<\/code>.<\/p>\n<p>Samuti installime <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>paketi npm,<\/a> mis v\u00f5imaldab meil <code>@import<\/code>CSS-is avaldusi k\u00e4sitleda.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>N\u00fc\u00fcd laiendage <code>\/webpack.config.js<\/code>faili nii, et see n\u00e4eks v\u00e4lja j\u00e4rgmine:<\/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>2 real oleme importinud <code>mini-css-extract-plugin<\/code>, real 20 oleme deklareerinud selle pistikprogrammina ja edastanud <code>..\/[name].css<\/code>kui <code>filename<\/code>. See t\u00e4hendab, et kompileeritud fail lisatakse pistikprogrammi juure.<\/p>\n<p>Real 10 oleme sisestanud objekti, millel on <code>test<\/code>parameeter, mis kasutab regexit, et n\u00e4idata, millist faili me kontrollime, ja <code>use<\/code>parameetrit.<\/p>\n<p>Parameeter <code>use<\/code>sisaldab k\u00f5igi pistikprogrammide massiivi, mida me selle testi jaoks rakendame. See k\u00e4ivitab pistikprogrammid loendi allosast, l\u00f5petades \u00fclaosas.<\/p>\n<p>Kui n\u00fc\u00fcd k\u00e4ivitame <code>npm start<\/code>, loob see <code>.css<\/code>faili pistikprogrammi juurtes.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"WordPressi Loo Block Scripti veebipaketi konfiguratsiooni laiendamine\" \/>CSS-faili genereerimine.<\/p>\n<p>Failistruktuuri vaadates on meil kaks t\u00e4iendavat faili:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Kausta saame ka paar JavaScripti faili <code>\/build<\/code>, aga kuidas nendega toime tulla, selgitan hiljem).<\/p>\n<p>Fail on <code>.map<\/code>osuti, mis n\u00e4itab teie JavaScripti konsoolile, millises failis m\u00f5ni CSS v\u00f5i Sass algselt m\u00e4\u00e4ratleti, ja aitab silumisel.<\/p>\n<p>Faili uurides <code>\/index.css<\/code>sisaldab see nii failide kui <code>\/src\/scss\/editor.scss<\/code>ka <code>\/src\/scss\/style.scss<\/code>failide koodi.<\/p>\n<p>See pole see, mida me tahame, kuna stiili- ja redaktorifailid on meie pistikprogrammide php-failis eraldi j\u00e4rjekorda pandud.<\/p>\n<h3>CSS-faili t\u00fckeldamine<\/h3>\n<p>Selle <code>\/index.css<\/code>faili jagamiseks peame \u00e4ra kasutama veebipaketi 4 <code>optimization.splitChunks<\/code>objekti. Selle konfiguratsiooni kohta lisateabe saamiseks lugege <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">splitChunksi dokumentatsiooni lehte<\/a>.<\/p>\n<p>Lisage oma <code>\/webpack.config.js<\/code>failile j\u00e4rgmine:<\/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>Kustutage varem loodud failid ja ehituskaust ning k\u00e4ivitage <code>npm start<\/code>.<\/p>\n<p>N\u00fc\u00fcd saame j\u00e4rgmised failid:<\/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>Vaadates <code>\/editor.css<\/code>ja <code>\/style.css<\/code>need on \u00f5igesti genereeritud ja sisaldavad soovitud koodi!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"WordPressi Loo Block Scripti veebipaketi konfiguratsiooni laiendamine\" \/>Redaktori genereerimine ja CSS-failide stiil.<\/p>\n<p>Kaustas olevaid faile <code>\/build<\/code>pole meie seadistamiseks vaja, ma uurin, kuidas saame need j\u00e4rgmisena eemaldada.<\/p>\n<h3>Soovimatute failide eemaldamine<\/h3>\n<p>Soovimatute failide eemaldamiseks kasutame <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>paketti npm<\/a>.<\/p>\n<p>See pistikprogramm ei lase veebipaketil teatud faile v\u00e4ljastada (v\u00f5i &quot;emiteerida&quot;).<\/p>\n<p>Installige pakett npm terminali k\u00e4suga:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>Muutke oma <code>\/webpack.config.js<\/code>faili nii, et see h\u00f5lmaks veebipaketi Ignore Emit pistikprogrammi konfiguratsiooni.<\/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>Pange t\u00e4hele uusi viiteid real 2, mis sisaldab pistikprogrammi Ignore Emit, ja real 41, mis \u00fctleb pluginale, milliseid faile ei tohi v\u00e4ljastada.<\/p>\n<p>N\u00fc\u00fcd, kui k\u00e4ivitame <code>npm start<\/code>(p\u00e4rast <code>\/build<\/code>kausta kustutamist) <code>\/build\/editor.js<\/code>, ei looda enam, <code>\/build\/editor.js.map<\/code>, <code>\/build\/style.js<\/code>ja .<code>\/build\/style.js.map<\/code><\/p>\n<h3>Ainult tootmine<\/h3>\n<p>Kui tahame, et toode v\u00e4ljastaks ainult toodet ja v\u00e4listaks <code>.map<\/code>failid, saame lihtsalt <code>devtool: false<\/code>oma <code>module.exports<\/code>objekti parameetrina edasi anda ja see takistab <code>.map<\/code>failide genereerimist.<\/p>\n<p>Kuna me tahame, et need failid j\u00e4etaks v\u00e4lja ainult tootmisserveris, saame <code>process.env.NODE_ENV<\/code>s\u00e4tteid kontrollida, et n\u00e4ha, milline on meie praegune keskkond, ja edastada, <code>devtool: false<\/code>kui keskkond on seatud tootmisre\u017eiimile.<\/p>\n<p>Selleks lisage meie <code>\/webpack.config.js<\/code>faili \u00fclaossa j\u00e4rgmine:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>Seej\u00e4rel lisage faili allossa j\u00e4rgmine teave:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Kui <code>npm start<\/code>k\u00e4sk k\u00e4ivitatakse ja s\u00f5lmekeskkond ei ole tootmisre\u017eiimile seatud, <code>.map<\/code>faile ei looda.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WordPressi redigeerija (Gutenberg) meeskonna ametlikul toel saate n\u00fc\u00fcd plokkpluginaga kiiresti t\u00f6\u00f6le hakata, kasutades WordPressi plokiskripti loomise (@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":[718,894,916,842,863],"tags":[1165],"class_list":["post-228292","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arendaja","category-kood","category-muud","category-opetused","category-wordpress-4","tag-affiai-et"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228292","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/comments?post=228292"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/posts\/228292\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/media?parent=228292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/categories?post=228292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/et\/wp-json\/wp\/v2\/tags?post=228292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}