Cum să eviți dependențele duplicate în blocurile Gutenberg

Question

Cum să eviți dependențele duplicate în blocurile Gutenberg

14 sept. 2020, 09:21:03

Vizualizări: 664

Voturi: 2

Scriptul de construire a blocurilor Gutenberg din WordPress utilizează wordpress/dependency-extraction-webpack-plugin pentru a construi blocurile fără a repeta dependențele WordPress, dar cum rămâne cu celelalte dependențe?

Dacă construiesc un plugin cu 10 blocuri și toate utilizează aceleași dependențe, scriptul de construire WordPress va încorpora dependența în fiecare bundle de bloc.

Există o metodă bună de a gestiona această situație fără a fi nevoit să recreez manual procesul de build Webpack?

Guerrilla

415

editor pe blocuri

Comentarii

Poți oferi un exemplu al dependențelor pe care le folosești? Dacă acestea nu fac parte din cele pe care le suportă plugin-ul, poate fi necesar să adaugi o configurație webpack personalizată care extinde cea oferită de @wordpress/scripts

Welcher

6 oct. 2020 17:30:31

"fără a fi nevoie să reconstruiești configurația webpack" - dacă am înțeles corect, nu, nu este necesar. Ai putea să pui toate blocurile într-un singur director și să folosești o singură configurație webpack. În ceea ce privește problema duplicării codului, webpack are un ghid pe care poți încerca.

Sally CJ

7 oct. 2020 14:09:36

Toate răspunsurile la întrebare

Comentarii

Unde adaugi asta? Folosesc wp-scripts build pentru build. Configurația webpack este ascunsă.

Guerrilla

13 nov. 2020 05:34:55

În fișierul tău de configurare webpack.

shramee

26 nov. 2020 20:56:41

când folosești wp-scripts build fișierul de configurare webpack nu este accesibil. Presupun că nu este posibil în acest fel și trebuie să construiești custom

Guerrilla

27 nov. 2020 03:55:37

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

Plugin-ul WordPress pentru extragerea dependențelor @wordpress/dependency-extraction-webpack-plugin face ca importurile de dependențe ES6 să folosească scripturile WordPress în loc să le adauge repetat în bundle.

Acest lucru permite modulelor înregistrate și înscrise în WordPress (inclusiv, dar fără a se limita la jquery, moment, react și modulele wp.*) să fie excluse corect din build-uri.

Puteți adăuga dependințe suplimentare pentru a fi excluse (asigurați-vă că le înregistrați/încărcați în WordPress) cu ajutorul callback-ului requestToHandle.

De exemplu, pentru a exclude componenta react-sortable din build, înregistrată ca script react-sortable în WordPress (PHP),

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