{"id":228734,"date":"2022-10-15T18:19:00","date_gmt":"2022-10-15T15:19:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228734"},"modified":"2022-11-09T04:04:28","modified_gmt":"2022-11-09T01:04:28","slug":"wordpressin-luo-block-script-verkkopaketin-konfiguroinnin-laajentaminen","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpressin-luo-block-script-verkkopaketin-konfiguroinnin-laajentaminen\/","title":{"rendered":"WordPressin Luo Block Script -verkkopaketin konfiguroinnin laajentaminen"},"content":{"rendered":"\n<p>WordPress Editor (Gutenberg) -tiimin virallisella tuella voit nyt saada nopeasti k\u00e4ytt\u00f6\u00f6n lohkolaajennuksen k\u00e4ytt\u00e4m\u00e4ll\u00e4 <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> -pakettia (<code>@wordpress\/create-block<\/code>npm-paketti).<\/p>\n<p><strong>T\u00e4m\u00e4 artikkeli koskee Luo lohkokomentosarjan vanhempaa versiota<\/strong><\/p>\n<p>Vaikka teoriaa voidaan edelleen soveltaa, jotkin t\u00e4m\u00e4n artikkelin tiedoista eiv\u00e4t ehk\u00e4 ole en\u00e4\u00e4 yhteensopivia uusimman luontilohkokomentosarjan kanssa. Voit <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">tarkastella p\u00e4ivitetty\u00e4 Luo Block Script -oppaamme t\u00e4\u00e4lt\u00e4<\/a>.<\/p>\n<p>Meill\u00e4 on my\u00f6s p\u00e4ivitetty opas <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">uusien sis\u00e4\u00e4ntulokohtien lis\u00e4\u00e4misest\u00e4 webpackiin<\/a>.<\/p>\n<p>T\u00e4ss\u00e4 artikkelissa tutkimme, kuinka voit lis\u00e4t\u00e4 mukautetun <code>webpack.config<\/code>laajentaaksesi <code>wp-scripts<\/code>lohkon luoman lohkon k\u00e4\u00e4nn\u00f6stoimintoja.<\/p>\n<p>T\u00e4ll\u00e4 voimme laajentaa <code>npm start<\/code>komentoa suorittamaan lis\u00e4teht\u00e4vi\u00e4. T\u00e4ss\u00e4 tapauksessa aiomme m\u00e4\u00e4ritt\u00e4\u00e4 liit\u00e4nn\u00e4isen k\u00e4\u00e4nt\u00e4m\u00e4\u00e4n Sass (<code>sass<\/code>, <code>scss<\/code>) kielelle <code>css<\/code>.<\/p>\n<p>K\u00e4\u00e4nn\u00e4mme Sassin <code>\/src<\/code>kansiosta laajennuksen juuressa oleviin <code>style.css<\/code>ja tiedostoihin.<code>editor.css<\/code><\/p>\n<h2>Luo Sass-tiedostomme<\/h2>\n<p>Ensimm\u00e4inen asia, jonka aiomme tehd\u00e4, on luoda uusi kansio osoitteessa <code>\/src\/scss<\/code>. Lis\u00e4\u00e4mme t\u00e4h\u00e4n kaksi tiedostoa:<\/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>Kopioimme <code>css<\/code>ja -tiedostot uusiin tiedostoihin <code>\/editor.css<\/code>.<code>\/style.css<\/code><\/p>\n<p>Sitten poistamme tiedostot <code>\/editor.css<\/code>ja .<code>\/style.css<\/code><\/p>\n<p>SCSS-tiedostot ja uusi kansiorakenne.<\/p>\n<h3>Tuo Sass sis\u00e4\u00e4n<code>\/src\/index.js<\/code><\/h3>\n<p>Lis\u00e4\u00e4 viestisi yl\u00e4osaan <code>\/src\/index.js<\/code>seuraavat lausunnot:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>T\u00e4m\u00e4 antaa webpackille mahdollisuuden poimia <code>.scss<\/code>tiedostot, jotta ne voidaan k\u00e4sitell\u00e4.<\/p>\n<p>Tuomalla tiedostomme yl\u00e4reunassa olevan Sassin t\u00e4ll\u00e4 tavalla, voimme <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">k\u00e4\u00e4nt\u00e4\u00e4 Sassin useille lohkoille saman laajennuksen sis\u00e4ll\u00e4 yhdeksi tiedostoksi<\/a>. T\u00e4ss\u00e4 tapauksessa se kokoaa Sassin yhdeksi <code>\/editor.css<\/code>ja <code>\/style.css<\/code>koko laajennuksen tiedostoiksi.<\/p>\n<h2>Asenna<code>webpack.config<\/code><\/h2>\n<p>Luo uusi tiedosto nimisen laajennuksen juureen <code>\/webpack.config.js<\/code>. Kopioi seuraava koodi kyseiseen tiedostoon:<\/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>Kirjoita nyt terminaaliin seuraava komento <code>cd<\/code>lis\u00e4osan juureen:<\/p>\n<p>Laajennuksen tulee k\u00e4\u00e4nt\u00e4\u00e4 JavaScript koontikansioon normaalisti.<\/p>\n<h3>Paketin asentaminen Sassin k\u00e4\u00e4nt\u00e4mist\u00e4 varten<\/h3>\n<p>Aiomme k\u00e4ytt\u00e4\u00e4 <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>npm-pakettia<\/a> tiedostojen luomiseen <code>.css<\/code>Sassistamme, t\u00e4t\u00e4 varten tarvitsemme my\u00f6s pari lis\u00e4pakettia <code>.scss<\/code>tiedostojen k\u00e4sittelemiseksi ensin CSS:ksi.<\/p>\n<p>Asennamme <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>npm-paketin<\/a>, jotta voimme k\u00e4\u00e4nt\u00e4\u00e4 CSS:n Sassiin. t\u00e4m\u00e4 on riippuvainen <code>node-scss<\/code>.<\/p>\n<p>Asennamme my\u00f6s <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>npm-paketin<\/a>, jotta voimme k\u00e4sitell\u00e4 <code>@import<\/code>lauseita CSS:ss\u00e4.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>Laajenna <code>\/webpack.config.js<\/code>tiedostoa niin, ett\u00e4 se n\u00e4ytt\u00e4\u00e4 seuraavalta:<\/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>Rivill\u00e4 2 olemme tuoneet <code>mini-css-extract-plugin<\/code>, rivill\u00e4 20 olemme ilmoittaneet sen laajennukseksi ja siirt\u00e4neet sen <code>..\/[name].css<\/code>nimell\u00e4 <code>filename<\/code>. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 k\u00e4\u00e4nnetty tiedosto lis\u00e4t\u00e4\u00e4n laajennuksen juureen.<\/p>\n<p>Rivill\u00e4 10 olemme sy\u00f6tt\u00e4neet sis\u00e4\u00e4n objektin, jolla on <code>test<\/code>parametri, joka k\u00e4ytt\u00e4\u00e4 regex-lausetta osoittamaan, mink\u00e4 tyyppist\u00e4 tiedostoa tarkistamme, ja <code>use<\/code>parametrin.<\/p>\n<p>Parametri <code>use<\/code>sis\u00e4lt\u00e4\u00e4 joukon kaikkia laajennuksia, joita aiomme soveltaa kyseiseen testiin. Se suorittaa laajennuksia luettelon alaosasta, joka p\u00e4\u00e4ttyy yl\u00e4osaan.<\/p>\n<p>Jos nyt suoritamme, <code>npm start<\/code>se tuottaa <code>.css<\/code>tiedoston laajennuksen juureen.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"WordPressin Luo Block Script -verkkopaketin konfiguroinnin laajentaminen\" \/>CSS-tiedoston luominen.<\/p>\n<p>Kun tarkastellaan tiedostorakennetta, meill\u00e4 on kaksi lis\u00e4tiedostoa:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Saamme my\u00f6s pari JavaScript-tiedostoa <code>\/build<\/code>kansioon, mutta selit\u00e4n kuinka k\u00e4sitell\u00e4 niit\u00e4 my\u00f6hemmin).<\/p>\n<p>Tiedosto <code>.map<\/code>on osoitin, joka osoittaa JavaScript-konsolillesi, mihin tiedostoon jokin CSS tai Sass alun perin m\u00e4\u00e4ritettiin, ja auttaa virheenkorjauksessa.<\/p>\n<p>Kun <code>\/index.css<\/code>tiedostoa tutkitaan, se sis\u00e4lt\u00e4\u00e4 koodin sek\u00e4 tiedostoista <code>\/src\/scss\/editor.scss<\/code>ett\u00e4 <code>\/src\/scss\/style.scss<\/code>tiedostoista.<\/p>\n<p>T\u00e4t\u00e4 emme halua, koska tyyli- ja muokkaustiedostot on jonossa erikseen lis\u00e4osien php-tiedostossa.<\/p>\n<h3>CSS-tiedoston jakaminen<\/h3>\n<p>T\u00e4m\u00e4n <code>\/index.css<\/code>tiedoston jakamiseksi meid\u00e4n on hy\u00f6dynnett\u00e4v\u00e4 webpack 4:n <code>optimization.splitChunks<\/code>objektia. Lis\u00e4tietoja sen m\u00e4\u00e4rityksest\u00e4 on <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">splitChunks &#8211; dokumentaatiosivulla<\/a>.<\/p>\n<p>Lis\u00e4\u00e4 <code>\/webpack.config.js<\/code>tiedostoosi seuraavat:<\/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>Poista aiemmin luodut tiedostot ja koontikansio ja suorita <code>npm start<\/code>.<\/p>\n<p>Saamme nyt seuraavat tiedostot:<\/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>Tarkastellaan <code>\/editor.css<\/code>ja <code>\/style.css<\/code>n\u00e4m\u00e4 on luotu oikein, ja sis\u00e4lt\u00e4v\u00e4t haluamamme koodin!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"WordPressin Luo Block Script -verkkopaketin konfiguroinnin laajentaminen\" \/>Muokkausohjelman luominen ja CSS-tiedostojen tyyli.<\/p>\n<p>Kansion tiedostoja <code>\/build<\/code>ei tarvita asennuksessamme, tutkin kuinka voimme poistaa ne seuraavaksi.<\/p>\n<h3>Ei-toivottujen tiedostojen poistaminen<\/h3>\n<p>Poistaaksemme ei-toivotut tiedostot aiomme k\u00e4ytt\u00e4\u00e4 <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>npm-pakettia<\/a>.<\/p>\n<p>T\u00e4m\u00e4 laajennus est\u00e4\u00e4 verkkopakettia tulostamasta (tai &quot;l\u00e4hett\u00e4m\u00e4st\u00e4&quot; tiettyj\u00e4 tiedostoja).<\/p>\n<p>Asenna npm-paketti terminaalikomennolla:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>Muokkaa <code>\/webpack.config.js<\/code>tiedostoa niin, ett\u00e4 se sis\u00e4lt\u00e4\u00e4 Ignore Emit webpack -laajennuksen asetukset.<\/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>Huomaa uudet viittaukset rivill\u00e4 2, joka sis\u00e4lt\u00e4\u00e4 Ignore Emit -laajennuksen, ja rivill\u00e4 41, joka kertoo liit\u00e4nn\u00e4lle, mit\u00e4 tiedostoja ei l\u00e4hetet\u00e4.<\/p>\n<p>Nyt kun suoritamme (kansion <code>npm start<\/code>poistamisen j\u00e4lkeen ), , ja -merkkej\u00e4 ei en\u00e4\u00e4 luoda.<code>\/build``\/build\/editor.js``\/build\/editor.js.map``\/build\/style.js``\/build\/style.js.map<\/code><\/p>\n<h3>Vain tuotanto<\/h3>\n<p>Jos haluamme tuottaa vain tuotteen ja j\u00e4tt\u00e4\u00e4 <code>.map<\/code>tiedostot pois, voimme yksinkertaisesti siirt\u00e4\u00e4 <code>devtool: false<\/code>parametrin <code>module.exports<\/code>objektiimme, jolloin <code>.map<\/code>tiedostot eiv\u00e4t muodostu.<\/p>\n<p>Koska haluamme, ett\u00e4 n\u00e4m\u00e4 tiedostot suljetaan pois vain tuotantopalvelimella, voimme tarkistaa <code>process.env.NODE_ENV<\/code>asetuksen n\u00e4hd\u00e4ksemme, mik\u00e4 nykyinen ymp\u00e4rist\u00f6mme on asetettu, ja v\u00e4litt\u00e4\u00e4, <code>devtool: false<\/code>jos ymp\u00e4rist\u00f6 on asetettu tuotantotilaan.<\/p>\n<p>Voit tehd\u00e4 t\u00e4m\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 seuraavat <code>\/webpack.config.js<\/code>tiedot tiedostomme alkuun:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>Lis\u00e4\u00e4 sitten tiedoston alaosaan:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Jos <code>npm start<\/code>komento suoritetaan eik\u00e4 solmuymp\u00e4rist\u00f6\u00e4 ole asetettu tuotantoon, <code>.map<\/code>tiedostoja ei luoda.<\/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>WordPress Editor (Gutenberg) -tiimin virallisella tuella voit nyt saada nopeasti k\u00e4ytt\u00f6\u00f6n lohkolaajennuksen k\u00e4ytt\u00e4m\u00e4ll\u00e4 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":[719,895,917,843,864],"tags":[1166],"class_list":["post-228734","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=228734"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/228734\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=228734"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=228734"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=228734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}