Come evitare dipendenze duplicate nei blocchi Gutenberg

Question

Come evitare dipendenze duplicate nei blocchi Gutenberg

14 set 2020, 09:21:03

Voti: 2

Lo script di build dei blocchi Gutenberg di WordPress utilizza wordpress/dependency-extraction-webpack-plugin per costruire i blocchi senza ripetere le dipendenze di WordPress, ma cosa succede con le altre dipendenze?

Se creo un plugin con 10 blocchi che riutilizzano le stesse dipendenze, lo script di build di WordPress incorporerà la dipendenza in ogni bundle dei blocchi.

Esiste un modo efficace per gestire questa situazione senza dover ricreare manualmente il build di webpack?

Guerrilla

415

editor di blocks

Commenti

Puoi fornire un esempio delle dipendenze che stai utilizzando? Se non fanno parte di quelle supportate dal plugin, potresti dover aggiungere una configurazione webpack personalizzata che estende quella fornita da @wordpress/scripts

Welcher

6 ott 2020 17:30:31

"senza dover ricreare la build webpack" - se ho capito correttamente, no, non è necessario. Potresti inserire tutti i tuoi blocchi in una singola directory e usare un'unica configurazione webpack. Per quanto riguarda il problema della duplicazione del codice, webpack ha una guida che puoi provare.

Sally CJ

7 ott 2020 14:09:36

Tutte le risposte alla domanda

Commenti

Dove si aggiunge questo? Sto usando wp-scripts build per la compilazione. La configurazione di webpack è nascosta.

Guerrilla

13 nov 2020 05:34:55

Nel tuo file di configurazione webpack.

shramee

26 nov 2020 20:56:41

quando si utilizza wp-scripts build il file di configurazione webpack non è accessibile. Immagino non sia possibile in questo modo e bisogna creare una configurazione personalizzata

Guerrilla

27 nov 2020 03:55:37

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

Il plugin di estrazione delle dipendenze per WordPress @wordpress/dependency-extraction-webpack-plugin fondamentalmente fa sì che le tue importazioni di dipendenze ES6 utilizzino gli script di WordPress invece di aggiungerle ripetutamente al bundle.

Ciò consente ai moduli registrati e accodati in WordPress (inclusi ma non limitati a jquery, moment, react e i moduli wp.*) di essere correttamente esclusi dai build.

Puoi aggiungere ulteriori dipendenze da escludere (assicurati di registrarle/accodarle in WordPress) utilizzando il callback requestToHandle.

Ad esempio, per escludere il componente react-sortable dal build registrato come script react-sortable in WordPress (PHP),

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