{"id":228635,"date":"2022-10-15T18:04:00","date_gmt":"2022-10-15T15:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228635"},"modified":"2022-11-09T03:24:40","modified_gmt":"2022-11-09T00:24:40","slug":"extension-de-la-configuration-du-pack-web-wordpress-create-block-script","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/extension-de-la-configuration-du-pack-web-wordpress-create-block-script\/","title":{"rendered":"Extension de la configuration du pack Web WordPress Create Block Script"},"content":{"rendered":"\n<p>Avec le soutien officiel de l&rsquo;\u00e9quipe de l&rsquo;\u00e9diteur WordPress (Gutenberg), vous pouvez d\u00e9sormais \u00eatre rapidement op\u00e9rationnel avec un plugin de bloc \u00e0 l&rsquo;aide du <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>paquet npm).<\/p>\n<p><strong>Cet article concerne une ancienne version du script de cr\u00e9ation de bloc<\/strong><\/p>\n<p>Bien que la th\u00e9orie puisse toujours \u00eatre appliqu\u00e9e, certaines des informations contenues dans cet article peuvent ne plus \u00eatre compatibles avec le dernier script de bloc de cr\u00e9ation. Vous pouvez <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">consulter notre guide de cr\u00e9ation de script de bloc mis \u00e0 jour ici<\/a>.<\/p>\n<p>Nous avons \u00e9galement un guide mis \u00e0 jour sur <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">l&rsquo;ajout de points d&rsquo;entr\u00e9e suppl\u00e9mentaires \u00e0 Webpack<\/a>.<\/p>\n<p>Dans cet article, nous explorons comment vous pouvez ajouter une personnalisation <code>webpack.config<\/code>pour \u00e9tendre la <code>wp-scripts<\/code>fonctionnalit\u00e9 de compilation du bloc g\u00e9n\u00e9r\u00e9 par le bloc.<\/p>\n<p>Avec cela, nous pouvons \u00e9tendre <code>npm start<\/code>la commande pour ex\u00e9cuter des t\u00e2ches suppl\u00e9mentaires. Dans ce cas, nous allons configurer le plugin pour compiler Sass (<code>sass<\/code>, <code>scss<\/code>) en <code>css<\/code>.<\/p>\n<p>Nous allons compiler le Sass du <code>\/src<\/code>dossier dans les fichiers <code>style.css<\/code>et <code>editor.css<\/code>\u00e0 la racine du plugin.<\/p>\n<h2>Cr\u00e9er nos fichiers Sass<\/h2>\n<p>La premi\u00e8re chose que nous allons faire est de cr\u00e9er un nouveau dossier dans <code>\/src\/scss<\/code>. Ici, nous allons ajouter deux fichiers\u00a0:<\/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>Nous allons copier les <code>css<\/code>fichiers <code>\/editor.css<\/code>et <code>\/style.css<\/code>dans les fichiers nouvellement cr\u00e9\u00e9s.<\/p>\n<p>Ensuite, nous supprimerons les fichiers <code>\/editor.css<\/code>et .<code>\/style.css<\/code><\/p>\n<p>Fichiers SCSS et la nouvelle structure de dossiers.<\/p>\n<h3>Importez le Sass dans<code>\/src\/index.js<\/code><\/h3>\n<p>En haut de votre <code>\/src\/index.js<\/code>ajoutez les d\u00e9clarations suivantes\u00a0:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>Cela permettra \u00e0 Webpack de r\u00e9cup\u00e9rer les <code>.scss<\/code>fichiers afin qu&rsquo;ils puissent \u00eatre trait\u00e9s.<\/p>\n<p>En important le Sass en haut de notre fichier de cette mani\u00e8re, cela nous permettra de <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">compiler le Sass pour plusieurs blocs au sein du m\u00eame plugin dans un seul fichier<\/a>. Dans ce cas, il compilera le Sass en fichiers uniques <code>\/editor.css<\/code>et <code>\/style.css<\/code>pour l&rsquo;ensemble du plugin.<\/p>\n<h2>Configurez le<code>webpack.config<\/code><\/h2>\n<p>Cr\u00e9ez un nouveau fichier \u00e0 la racine du plugin appel\u00e9 <code>\/webpack.config.js<\/code>. Copiez le code suivant dans ce fichier\u00a0:<\/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>Maintenant, dans votre terminal, entrez la commande suivante <code>cd<\/code>\u00e0 la racine du plugin\u00a0:<\/p>\n<p>Le plugin doit compiler le JavaScript dans le dossier de construction comme d&rsquo;habitude.<\/p>\n<h3>Installer un paquet pour compiler Sass<\/h3>\n<p>Nous allons utiliser le <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>package npm<\/a> pour cr\u00e9er <code>.css<\/code>des fichiers \u00e0 partir de notre Sass. Pour ce faire, nous avons \u00e9galement besoin de quelques packages suppl\u00e9mentaires pour traiter d&rsquo; <code>.scss<\/code>abord les fichiers en CSS.<\/p>\n<p>Nous allons installer le <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>package npm<\/a>, pour nous permettre de compiler CSS en Sass. cela a une d\u00e9pendance de <code>node-scss<\/code>.<\/p>\n<p>Nous installerons \u00e9galement le <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>package npm<\/a> pour nous permettre de g\u00e9rer les <code>@import<\/code>instructions dans le CSS.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>D\u00e9veloppez maintenant le <code>\/webpack.config.js<\/code>fichier pour qu&rsquo;il ressemble \u00e0 ceci\u00a0:<\/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>\u00c0 la ligne 2, nous avons import\u00e9 le <code>mini-css-extract-plugin<\/code>, \u00e0 la ligne 20, nous l&rsquo;avons d\u00e9clar\u00e9 en tant que plugin et transmis en <code>..\/[name].css<\/code>tant que <code>filename<\/code>. Cela signifie que le fichier compil\u00e9 sera ajout\u00e9 \u00e0 la racine du plugin.<\/p>\n<p>\u00c0 la ligne 10, nous avons pass\u00e9 un objet qui a un <code>test<\/code>param\u00e8tre, qui utilise une expression r\u00e9guli\u00e8re pour indiquer le type de fichier que nous v\u00e9rifions et un <code>use<\/code>param\u00e8tre.<\/p>\n<p>Le <code>use<\/code>param\u00e8tre contient un tableau de tous les plugins que nous allons appliquer pour ce test. Il ex\u00e9cute les plugins \u00e0 partir du bas de la liste, se terminant en haut.<\/p>\n<p>Maintenant, si nous l&rsquo;ex\u00e9cutons <code>npm start<\/code>, cela produira un <code>.css<\/code>fichier \u00e0 la racine du plugin.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"Extension de la configuration du pack Web WordPress Create Block Script\" \/>G\u00e9n\u00e9ration d&rsquo;un fichier CSS.<\/p>\n<p>En regardant la structure des fichiers, nous avons deux fichiers suppl\u00e9mentaires\u00a0:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Nous obtenons \u00e9galement quelques fichiers JavaScript dans le <code>\/build<\/code>dossier, mais j&rsquo;expliquerai comment les traiter plus tard).<\/p>\n<p>Le <code>.map<\/code>fichier est un pointeur qui indique \u00e0 votre console JavaScript dans quel fichier CSS ou Sass a \u00e9t\u00e9 d\u00e9fini \u00e0 l&rsquo;origine, et aide au d\u00e9bogage.<\/p>\n<p>En examinant le <code>\/index.css<\/code>fichier, il contient le code des fichiers <code>\/src\/scss\/editor.scss<\/code>et .<code>\/src\/scss\/style.scss<\/code><\/p>\n<p>Ce n&rsquo;est pas ce que nous voulons, car les fichiers de style et d&rsquo;\u00e9diteur sont mis en file d&rsquo;attente s\u00e9par\u00e9ment dans notre fichier php de plugins.<\/p>\n<h3>Fractionner le fichier CSS<\/h3>\n<p>Pour diviser ce <code>\/index.css<\/code>fichier, nous devons tirer parti de l&rsquo;objet de webpack 4 <code>optimization.splitChunks<\/code>. Pour plus d&rsquo;informations sur sa configuration, lisez la <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">page de documentation de splitChunks<\/a>.<\/p>\n<p>Ajoutez ce qui suit \u00e0 votre <code>\/webpack.config.js<\/code>fichier\u00a0:<\/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>Supprimez les fichiers g\u00e9n\u00e9r\u00e9s pr\u00e9c\u00e9demment et le dossier de construction et ex\u00e9cutez <code>npm start<\/code>.<\/p>\n<p>Nous obtenons maintenant les fichiers suivants :<\/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>Regarder <code>\/editor.css<\/code>et <code>\/style.css<\/code>ceux-ci ont \u00e9t\u00e9 g\u00e9n\u00e9r\u00e9s correctement, et contiennent le code que nous voulons !<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"Extension de la configuration du pack Web WordPress Create Block Script\" \/>G\u00e9n\u00e9ration des fichiers CSS de l&rsquo;\u00e9diteur et du style.<\/p>\n<p>Les fichiers du <code>\/build<\/code>dossier ne sont pas n\u00e9cessaires pour notre configuration, je vais explorer comment nous pouvons les supprimer ensuite.<\/p>\n<h3>Suppression des fichiers ind\u00e9sirables<\/h3>\n<p>Pour supprimer les fichiers ind\u00e9sirables, nous allons utiliser le <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>package npm<\/a>.<\/p>\n<p>Ce plugin emp\u00eache webpack de sortir (ou &quot;d&rsquo;\u00e9mettre&quot; certains fichiers).<\/p>\n<p>Installez le package npm avec la commande terminal\u00a0:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>Modifiez votre <code>\/webpack.config.js<\/code>fichier pour inclure la configuration du 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>Notez les nouvelles r\u00e9f\u00e9rences \u00e0 la ligne 2, qui inclut le plugin Ignore Emit, et \u00e0 la ligne 41 qui indique au plugin quels fichiers ne pas \u00e9mettre.<\/p>\n<p>Maintenant, lorsque nous ex\u00e9cutons <code>npm start<\/code>(apr\u00e8s avoir supprim\u00e9 le <code>\/build<\/code>dossier) <code>\/build\/editor.js<\/code>, les fichiers <code>\/build\/editor.js.map<\/code>, <code>\/build\/style.js<\/code>et <code>\/build\/style.js.map<\/code>ne sont plus cr\u00e9\u00e9s.<\/p>\n<h3>Sortie de production uniquement<\/h3>\n<p>Si nous voulons avoir une sortie de produit uniquement et exclure les <code>.map<\/code>fichiers, nous pouvons simplement passer <code>devtool: false<\/code>en tant que param\u00e8tre dans notre <code>module.exports<\/code>objet, ce qui emp\u00eachera la <code>.map<\/code>g\u00e9n\u00e9ration des fichiers.<\/p>\n<p>\u00c9tant donn\u00e9 que nous voulons uniquement que ces fichiers soient exclus sur un serveur de production, nous pouvons v\u00e9rifier le <code>process.env.NODE_ENV<\/code>param\u00e8tre pour voir sur quoi notre environnement actuel est d\u00e9fini et transmettre <code>devtool: false<\/code>si l&rsquo;environnement est d\u00e9fini sur production.<\/p>\n<p>Pour ce faire, ajoutez ce qui suit en haut de notre <code>\/webpack.config.js<\/code>fichier\u00a0:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>Ajoutez ensuite ce qui suit au bas du fichier\u00a0:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Si la <code>npm start<\/code>commande est ex\u00e9cut\u00e9e et que l&rsquo;environnement de n\u0153ud n&rsquo;est pas d\u00e9fini sur production, les <code>.map<\/code>fichiers ne seront pas cr\u00e9\u00e9s.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Source d&rsquo;enregistrement:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wholesomecode.ltd\" class=\"external external_icon\">wholesomecode.ltd<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Avec le soutien officiel de l&rsquo;\u00e9quipe de l&rsquo;\u00e9diteur WordPress (Gutenberg), vous pouvez d\u00e9sormais \u00eatre rapidement op\u00e9rationnel avec un plugin de bloc \u00e0 l&rsquo;aide du 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":[915,893,717,841,862],"tags":[1167],"class_list":["post-228635","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-autre","category-code-2","category-developpeur","category-tutoriels","category-wordpress-3","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228635","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=228635"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/228635\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=228635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=228635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=228635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}