{"id":228290,"date":"2022-10-15T18:13:00","date_gmt":"2022-10-15T15:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=228290"},"modified":"2022-11-09T01:42:20","modified_gmt":"2022-11-08T22:42:20","slug":"ampliacion-de-la-configuracion-del-paquete-web-wordpress-create-block-script","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/ampliacion-de-la-configuracion-del-paquete-web-wordpress-create-block-script\/","title":{"rendered":"Ampliaci\u00f3n de la configuraci\u00f3n del paquete web WordPress Create Block Script"},"content":{"rendered":"\n<p>Con el soporte oficial del equipo del editor de WordPress (Gutenberg), ahora puede comenzar a usar r\u00e1pidamente un complemento de bloque utilizando el script de creaci\u00f3n de <a href=\"https:\/\/wholesomecode.ltd\/articles\/an-overview-of-the-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">bloque de WordPress<\/a> (<code>@wordpress\/create-block<\/code>paquete npm).<\/p>\n<p><strong>Este art\u00edculo es para una versi\u00f3n anterior de Create Block Script<\/strong><\/p>\n<p>Aunque la teor\u00eda a\u00fan se puede aplicar, es posible que parte de la informaci\u00f3n de este art\u00edculo ya no sea compatible con el \u00faltimo script de creaci\u00f3n de bloques. Puede <a href=\"https:\/\/wholesomecode.ltd\/guides\/creating-plugin-wordpress-gutenberg\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">ver nuestra gu\u00eda actualizada de creaci\u00f3n de secuencias de comandos de bloques aqu\u00ed<\/a>.<\/p>\n<p>Tambi\u00e9n tenemos una gu\u00eda actualizada sobre c\u00f3mo <a href=\"https:\/\/wholesomecode.ltd\/guides\/entry-points-wordpress-create-block-script\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">agregar puntos de entrada adicionales al paquete web<\/a>.<\/p>\n<p>En este art\u00edculo exploramos c\u00f3mo puede agregar un personalizado <code>webpack.config<\/code>para expandir la <code>wp-scripts<\/code>funcionalidad de compilaci\u00f3n del bloque generado por el bloque.<\/p>\n<p>Con esto podemos expandir el <code>npm start<\/code>comando para ejecutar tareas adicionales. En este caso vamos a configurar el complemento para compilar Sass (<code>sass<\/code>, <code>scss<\/code>) en <code>css<\/code>.<\/p>\n<p>Compilaremos el Sass de la <code>\/src<\/code>carpeta en los archivos <code>style.css<\/code>y <code>editor.css<\/code>en la ra\u00edz del complemento.<\/p>\n<h2>Crear nuestros archivos Sass<\/h2>\n<p>Lo primero que vamos a hacer es crear una nueva carpeta en <code>\/src\/scss<\/code>. Aqu\u00ed agregaremos dos archivos:<\/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>Copiaremos los archivos <code>css<\/code>de <code>\/editor.css<\/code>y <code>\/style.css<\/code>en los archivos reci\u00e9n creados.<\/p>\n<p>Luego eliminaremos los archivos <code>\/editor.css<\/code>y .<code>\/style.css<\/code><\/p>\n<p>Archivos SCSS y la nueva estructura de carpetas.<\/p>\n<h3>Importar el Sass en<code>\/src\/index.js<\/code><\/h3>\n<p>En la parte superior de su <code>\/src\/index.js<\/code>agregar las siguientes declaraciones:<\/p>\n<pre><code>import '.\/scss\/editor.scss';\nimport '.\/scss\/style.scss';\n<\/code><\/pre>\n<p>Esto permitir\u00e1 que webpack recopile los <code>.scss<\/code>archivos para que puedan ser procesados.<\/p>\n<p>Al importar el Sass en la parte superior de nuestro archivo de esta manera, nos permitir\u00e1 <a href=\"https:\/\/wholesomecode.ltd\/compiling-sass-for-multiple-blocks-with-the-webpack-config\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">compilar el Sass para m\u00faltiples bloques dentro del mismo complemento en un solo archivo<\/a>. En este caso, compilar\u00e1 Sass en archivos individuales <code>\/editor.css<\/code>y para todo el complemento.<code>\/style.css<\/code><\/p>\n<h2>Configurar el<code>webpack.config<\/code><\/h2>\n<p>Cree un nuevo archivo en la ra\u00edz del complemento llamado <code>\/webpack.config.js<\/code>. Copie el siguiente c\u00f3digo en ese archivo:<\/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>Ahora, en su terminal, ingrese el siguiente comando <code>cd<\/code>en la ra\u00edz del complemento:<\/p>\n<p>El complemento debe compilar el JavaScript en la carpeta de compilaci\u00f3n como de costumbre.<\/p>\n<h3>Instalar un paquete para compilar Sass<\/h3>\n<p>Vamos a usar el <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>paquete npm<\/a> para crear <code>.css<\/code>archivos desde nuestro Sass, para hacer esto tambi\u00e9n necesitamos un par de paquetes adicionales para procesar los <code>.scss<\/code>archivos en CSS primero.<\/p>\n<p>Instalaremos el <a href=\"https:\/\/www.npmjs.com\/package\/sass-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>scss-loader<\/code>paquete npm<\/a>, para permitirnos compilar CSS a Sass. esto tiene una dependencia de <code>node-scss<\/code>.<\/p>\n<p>Tambi\u00e9n instalaremos el <a href=\"https:\/\/www.npmjs.com\/package\/css-loader\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\"><code>css-loader<\/code>paquete npm<\/a> para permitirnos manejar <code>@import<\/code>declaraciones en el CSS.<\/p>\n<pre><code>npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev\n<\/code><\/pre>\n<p>Ahora extienda el <code>\/webpack.config.js<\/code>archivo para que se vea como lo siguiente:<\/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>En la l\u00ednea 2 hemos importado el <code>mini-css-extract-plugin<\/code>, en la l\u00ednea 20 lo hemos declarado como complemento y lo hemos pasado <code>..\/[name].css<\/code>como <code>filename<\/code>. Esto significa que el archivo compilado se agregar\u00e1 a la ra\u00edz del complemento.<\/p>\n<p>En la l\u00ednea 10 hemos pasado un objeto que tiene un <code>test<\/code>par\u00e1metro, que usa una expresi\u00f3n regular para indicar el tipo de archivo que estamos buscando y un <code>use<\/code>par\u00e1metro.<\/p>\n<p>El <code>use<\/code>par\u00e1metro contiene una matriz de todos los complementos que vamos a aplicar para esa prueba. Ejecuta los complementos desde la parte inferior de la lista, terminando en la parte superior.<\/p>\n<p>Ahora, si lo ejecutamos <code>npm start<\/code>, producir\u00e1 un <code>.css<\/code>archivo en la ra\u00edz del complemento.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc0ce2c4.png\" alt=\"Ampliaci\u00f3n de la configuraci\u00f3n del paquete web WordPress Create Block Script\" \/>Generaci\u00f3n de un archivo CSS.<\/p>\n<p>Mirando la estructura de archivos tenemos dos archivos adicionales:<\/p>\n<ul>\n<li><code>\/index.css<\/code><\/li>\n<li><code>\/index.css.map<\/code><\/li>\n<\/ul>\n<p>(Tambi\u00e9n tenemos un par de archivos JavaScript en la <code>\/build<\/code>carpeta, pero explicar\u00e9 c\u00f3mo manejarlos m\u00e1s adelante).<\/p>\n<p>El <code>.map<\/code>archivo es un puntero que indica a su consola de JavaScript en qu\u00e9 archivo se defini\u00f3 originalmente CSS o Sass, y ayuda con la depuraci\u00f3n.<\/p>\n<p>Al examinar el <code>\/index.css<\/code>archivo, contiene el c\u00f3digo de los archivos <code>\/src\/scss\/editor.scss<\/code>y .<code>\/src\/scss\/style.scss<\/code><\/p>\n<p>Esto no es lo que queremos, ya que los archivos de estilo y editor se ponen en cola por separado en nuestro archivo php de complementos.<\/p>\n<h3>Dividir el archivo CSS<\/h3>\n<p>Para dividir este <code>\/index.css<\/code>archivo, debemos aprovechar el <code>optimization.splitChunks<\/code>objeto de webpack 4. Para obtener m\u00e1s informaci\u00f3n sobre su configuraci\u00f3n, lea la <a href=\"https:\/\/webpack.js.org\/plugins\/split-chunks-plugin\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">p\u00e1gina de documentaci\u00f3n de splitChunks<\/a>.<\/p>\n<p>Agregue lo siguiente a su <code>\/webpack.config.js<\/code>archivo:<\/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>Elimine los archivos generados anteriormente y la carpeta de compilaci\u00f3n y ejecute <code>npm start<\/code>.<\/p>\n<p>Ahora obtenemos los siguientes archivos:<\/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>\u00a1 Mirando <code>\/editor.css<\/code>y <code>\/style.css<\/code>estos se han generado correctamente y contienen el c\u00f3digo que queremos!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-169062-61e7fcc1d8349.png\" alt=\"Ampliaci\u00f3n de la configuraci\u00f3n del paquete web WordPress Create Block Script\" \/>Generando el editor y estilos de Archivos CSS.<\/p>\n<p>Los archivos en la <code>\/build<\/code>carpeta no son necesarios para nuestra configuraci\u00f3n, explorar\u00e9 c\u00f3mo podemos eliminarlos a continuaci\u00f3n.<\/p>\n<h3>Eliminaci\u00f3n de archivos no deseados<\/h3>\n<p>Para eliminar archivos no deseados vamos a utilizar el <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>paquete npm<\/a>.<\/p>\n<p>Este complemento evita que el paquete web genere (o &#8216;emita&#8217; ciertos archivos).<\/p>\n<p>Instale el paquete npm con el comando de terminal:<\/p>\n<pre><code>npm install ignore-emit-webpack-plugin --save-dev\n<\/code><\/pre>\n<p>Modifique su <code>\/webpack.config.js<\/code>archivo para incluir la configuraci\u00f3n del complemento 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>Tenga en cuenta las nuevas referencias en la l\u00ednea 2, que incluye el complemento Ignorar emisi\u00f3n, y en la l\u00ednea 41 que le dice al complemento qu\u00e9 archivos no emitir.<\/p>\n<p>Ahora cuando ejecutamos <code>npm start<\/code>(despu\u00e9s de borrar la <code>\/build<\/code>carpeta) los <code>\/build\/editor.js<\/code>, <code>\/build\/editor.js.map<\/code>y <code>\/build\/style.js<\/code>ya <code>\/build\/style.js.map<\/code>no se crean.<\/p>\n<h3>Salida de solo producci\u00f3n<\/h3>\n<p>Si queremos que solo se generen productos y excluir los <code>.map<\/code>archivos, simplemente podemos pasarlos <code>devtool: false<\/code>como un par\u00e1metro a nuestro <code>module.exports<\/code>objeto, y esto evitar\u00e1 <code>.map<\/code>que se generen los archivos.<\/p>\n<p>Debido a que solo queremos que estos archivos se excluyan en un servidor de producci\u00f3n, podemos verificar la <code>process.env.NODE_ENV<\/code>configuraci\u00f3n para ver en qu\u00e9 est\u00e1 configurado nuestro entorno actual y pasar <code>devtool: false<\/code>si el entorno est\u00e1 configurado en producci\u00f3n.<\/p>\n<p>Para hacer esto, agregue lo siguiente en la parte superior de nuestro <code>\/webpack.config.js<\/code>archivo:<\/p>\n<pre><code>const production = 'development' !== process.env.NODE_ENV;\n<\/code><\/pre>\n<p>Luego agregue lo siguiente al final del archivo:<\/p>\n<pre><code>if (production) {\n    module.exports.devtool = false;\n}\n<\/code><\/pre>\n<p>Si <code>npm start<\/code>se ejecuta el comando y el entorno del nodo no est\u00e1 configurado para producci\u00f3n, los <code>.map<\/code>archivos no se crear\u00e1n.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <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 el soporte oficial del equipo del editor de WordPress (Gutenberg), ahora puede comenzar a usar r\u00e1pidamente un complemento de bloque utilizando el script de creaci\u00f3n de bloque de WordPress (@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":[892,716,914,840,861],"tags":[1172],"class_list":["post-228290","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228290","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=228290"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/228290\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/221243"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=228290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=228290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=228290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}