Cómo evitar dependencias duplicadas en bloques de Gutenberg

Question

Cómo evitar dependencias duplicadas en bloques de Gutenberg

14 sept 2020, 09:21:03

Vistas: 664

Votos: 2

El script de construcción de bloques Gutenberg de WordPress utiliza wordpress/dependency-extraction-webpack-plugin para construir los bloques sin que se repitan las dependencias de WordPress, pero ¿qué pasa con otras dependencias?

Si construyo un plugin con 10 bloques y todos reutilizan dependencias, el script de construcción de WordPress incrustará la dependencia en cada paquete de bloque.

¿Existe una buena manera de manejar esto sin tener que recrear manualmente la construcción de Webpack?

Guerrilla

415

block editor

Comentarios

¿Puedes proporcionar un ejemplo de las dependencias que estás usando? Si no son parte de las que el plugin soporta, puede que necesites añadir una configuración personalizada de webpack que extienda la proporcionada por @wordpress/scripts

Welcher

6 oct 2020 17:30:31

"sin tener que recrear el build de webpack" - si lo entiendo correctamente, no, no tienes que hacerlo. Podrías poner todos tus bloques en un solo directorio y usar una única configuración de webpack. Como con el problema de duplicación de código, webpack tiene una guía que puedes probar.

Sally CJ

7 oct 2020 14:09:36

Todas las respuestas a la pregunta

Comentarios

¿Dónde agregas esto? Estoy usando wp-scripts build para construir. La configuración de webpack está oculta.

Guerrilla

13 nov 2020 05:34:55

En tu archivo de configuración de webpack.

shramee

26 nov 2020 20:56:41

al usar wp-scripts build el archivo de configuración de webpack no es accesible. Supongo que no es posible de esa manera y hay que construir uno personalizado

Guerrilla

27 nov 2020 03:55:37

shramee 497 · Accepted Answer · 2020-10-08T22:27:36Z

El plugin de extracción de dependencias de WordPress @wordpress/dependency-extraction-webpack-plugin básicamente hace que tus importaciones de dependencias ES6 utilicen los scripts de WordPress en lugar de agregarlos al paquete una y otra vez.

Esto hace que los módulos registrados y encolados en WordPress (incluyendo pero no limitados a jquery, moment, react y módulos wp.*) sean excluidos correctamente de las compilaciones.

Puedes agregar dependencias adicionales para excluir (asegúrate de registrarlas/encolarlas en WordPress) con la función callback requestToHandle.

Por ejemplo, para excluir el componente react-sortable de la compilación registrado como script react-sortable en WordPress (PHP),

module.exports = {
  plugins: [
    new DependencyExtractionWebpackPlugin( {
      requestToHandle: function ( module ) {
        if ( module === 'react-sortable' ) {
          return 'react-sortable'; // Handle del script en WordPress
        }
      }
    } ),
  ]
}