Ampliación de la configuración del paquete web WordPress Create Block Script

Con el soporte oficial del equipo del editor de WordPress (Gutenberg), ahora puede comenzar a usar rápidamente un complemento de bloque utilizando el script de creación de bloque de WordPress (@wordpress/create-blockpaquete npm).

Este artículo es para una versión anterior de Create Block Script

Aunque la teoría aún se puede aplicar, es posible que parte de la información de este artículo ya no sea compatible con el último script de creación de bloques. Puede ver nuestra guía actualizada de creación de secuencias de comandos de bloques aquí.

También tenemos una guía actualizada sobre cómo agregar puntos de entrada adicionales al paquete web.

En este artículo exploramos cómo puede agregar un personalizado webpack.configpara expandir la wp-scriptsfuncionalidad de compilación del bloque generado por el bloque.

Con esto podemos expandir el npm startcomando para ejecutar tareas adicionales. En este caso vamos a configurar el complemento para compilar Sass (sass, scss) en css.

Compilaremos el Sass de la /srccarpeta en los archivos style.cssy editor.cssen la raíz del complemento.

Crear nuestros archivos Sass

Lo primero que vamos a hacer es crear una nueva carpeta en /src/scss. Aquí agregaremos dos archivos:

• /src/scss/editor.scss
• /src/scss/style.scss

Copiaremos los archivos cssde /editor.cssy /style.cssen los archivos recién creados.

Luego eliminaremos los archivos /editor.cssy ./style.css

Archivos SCSS y la nueva estructura de carpetas.

Importar el Sass en/src/index.js

En la parte superior de su /src/index.jsagregar las siguientes declaraciones:

import './scss/editor.scss';
import './scss/style.scss';

Esto permitirá que webpack recopile los .scssarchivos para que puedan ser procesados.

Al importar el Sass en la parte superior de nuestro archivo de esta manera, nos permitirá compilar el Sass para múltiples bloques dentro del mismo complemento en un solo archivo. En este caso, compilará Sass en archivos individuales /editor.cssy para todo el complemento./style.css

Configurar elwebpack.config

Cree un nuevo archivo en la raíz del complemento llamado /webpack.config.js. Copie el siguiente código en ese archivo:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
        ]
    }
};

Ahora, en su terminal, ingrese el siguiente comando cden la raíz del complemento:

El complemento debe compilar el JavaScript en la carpeta de compilación como de costumbre.

Instalar un paquete para compilar Sass

Vamos a usar el mini-css-extract-pluginpaquete npm para crear .cssarchivos desde nuestro Sass, para hacer esto también necesitamos un par de paquetes adicionales para procesar los .scssarchivos en CSS primero.

Instalaremos el scss-loaderpaquete npm, para permitirnos compilar CSS a Sass. esto tiene una dependencia de node-scss.

También instalaremos el css-loaderpaquete npm para permitirnos manejar @importdeclaraciones en el CSS.

npm install mini-css-extract-plugin css-loader sass-loader node-sass --save-dev

Ahora extienda el /webpack.config.jsarchivo para que se vea como lo siguiente:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.s[ac]ss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
        ],
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin( {
            filename: '../[name].css',
        } ),
    ],
};

En la línea 2 hemos importado el mini-css-extract-plugin, en la línea 20 lo hemos declarado como complemento y lo hemos pasado ../[name].csscomo filename. Esto significa que el archivo compilado se agregará a la raíz del complemento.

En la línea 10 hemos pasado un objeto que tiene un testparámetro, que usa una expresión regular para indicar el tipo de archivo que estamos buscando y un useparámetro.

El useparámetro 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.

Ahora, si lo ejecutamos npm start, producirá un .cssarchivo en la raíz del complemento.

Generación de un archivo CSS.

Mirando la estructura de archivos tenemos dos archivos adicionales:

• /index.css
• /index.css.map

(También tenemos un par de archivos JavaScript en la /buildcarpeta, pero explicaré cómo manejarlos más adelante).

El .maparchivo es un puntero que indica a su consola de JavaScript en qué archivo se definió originalmente CSS o Sass, y ayuda con la depuración.

Al examinar el /index.cssarchivo, contiene el código de los archivos /src/scss/editor.scssy ./src/scss/style.scss

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.

Dividir el archivo CSS

Para dividir este /index.cssarchivo, debemos aprovechar el optimization.splitChunksobjeto de webpack 4. Para obtener más información sobre su configuración, lea la página de documentación de splitChunks.

Agregue lo siguiente a su /webpack.config.jsarchivo:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.s[ac]ss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
        ],
    },
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                  default: false,
                editor: {
                    chunks: 'all',
                      enforce: true,
                    name: 'editor',
                    test: /editor.s[ac]ss$/i,
                },
                style: {
                    chunks: 'all',
                      enforce: true,
                    name: 'style',
                    test: /style.s[ac]ss$/i,
                },
            },
        },
    },
    plugins: [
        ...defaultConfig.plugins,
        new MiniCssExtractPlugin( {
            filename: '../[name].css',
        } ),
    ],
};

Elimine los archivos generados anteriormente y la carpeta de compilación y ejecute npm start.

Ahora obtenemos los siguientes archivos:

• /build/editor.js
• /build/editor.js.map
• /build/style.js
• /build/style.js.map
• /editor.css
• /editor.css.map
• /style.css
• /style.css.map

¡ Mirando /editor.cssy /style.cssestos se han generado correctamente y contienen el código que queremos!

Generando el editor y estilos de Archivos CSS.

Los archivos en la /buildcarpeta no son necesarios para nuestra configuración, exploraré cómo podemos eliminarlos a continuación.

Eliminación de archivos no deseados

Para eliminar archivos no deseados vamos a utilizar el ignore-emit-webpack-pluginpaquete npm.

Este complemento evita que el paquete web genere (o ‘emita’ ciertos archivos).

Instale el paquete npm con el comando de terminal:

npm install ignore-emit-webpack-plugin --save-dev

Modifique su /webpack.config.jsarchivo para incluir la configuración del complemento Ignore Emit webpack.

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const IgnoreEmitWebPackPlugin = require( 'ignore-emit-webpack-plugin' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );

module.exports = {
    ...defaultConfig,
    module: {
        ...defaultConfig.module,
        rules: [
            ...defaultConfig.module.rules,
            {
                test: /.s[ac]ss$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' },
                    { loader: 'sass-loader' },
                ],
            },
        ],
    },
    optimization: {
        ...defaultConfig.optimization,
        splitChunks: {
            cacheGroups: {
                  default: false,
                editor: {
                    chunks: 'all',
                      enforce: true,
                    name: 'editor',
                    test: /editor.s[ac]ss$/i,
                },
                style: {
                    chunks: 'all',
                      enforce: true,
                    name: 'style',
                    test: /style.s[ac]ss$/i,
                },
            },
        },
    },
    plugins: [
        ...defaultConfig.plugins,
        new IgnoreEmitWebPackPlugin( [ 'editor.js', 'style.js' ] ),
        new MiniCssExtractPlugin( {
            filename: '../[name].css',
        } ),
    ],
};

Tenga en cuenta las nuevas referencias en la línea 2, que incluye el complemento Ignorar emisión, y en la línea 41 que le dice al complemento qué archivos no emitir.

Ahora cuando ejecutamos npm start(después de borrar la /buildcarpeta) los /build/editor.js, /build/editor.js.mapy /build/style.jsya /build/style.js.mapno se crean.

Salida de solo producción

Si queremos que solo se generen productos y excluir los .maparchivos, simplemente podemos pasarlos devtool: falsecomo un parámetro a nuestro module.exportsobjeto, y esto evitará .mapque se generen los archivos.

Debido a que solo queremos que estos archivos se excluyan en un servidor de producción, podemos verificar la process.env.NODE_ENVconfiguración para ver en qué está configurado nuestro entorno actual y pasar devtool: falsesi el entorno está configurado en producción.

Para hacer esto, agregue lo siguiente en la parte superior de nuestro /webpack.config.jsarchivo:

const production = 'development' !== process.env.NODE_ENV;

Luego agregue lo siguiente al final del archivo:

if (production) {
    module.exports.devtool = false;
}

Si npm startse ejecuta el comando y el entorno del nodo no está configurado para producción, los .maparchivos no se crearán.