web-dev-qa-db-fra.com

dépendance de lodash dans un plugin Gutenberg

Je fais mes premiers pas dans le développement de blocs de Gutenberg et je suis déjà bloqué. Mon script JS de bloc utilise plusieurs fonctions lodash (filter et pick). J'inscris mon bloc en utilisant la fonction suivante:

function register_block() {
    wp_register_script(
        'block-script',
        plugins_url( 'block.build.js', __FILE__ ),
        array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-utils', 'lodash' )
    );

    register_block_type( 'my/block', array(
        'editor_script' => 'block-script',
    ) );
}

Comme vous pouvez le constater, j'ajoute la bibliothèque lodash en tant que dépendance et vérifie que le code source de la page est effectivement chargé avant le script de mon plugin. Cependant, je reçois une erreur de console ReferenceError: pick is not defined.

C'est la ligne qui appelle la fonction pick:

onSelectImages( images ) {
    this.props.setAttributes( {
        images: images.map( ( image ) => pick( image, [ 'alt', 'caption', 'id', 'url' ] ) ),
    } );
}

Je ne sais pas ce que je fais mal. Des idées?

Merci d'avance

plugin-developmentjavascriptblock-editor
3
leemon

Dans le script de bloc, je devais remplacer:

import pick from 'lodash/pick';

avec:

const { pick } = lodash;

Et maintenant, cela semble fonctionner pour moi.

3
leemon

Le problème est que lodash n'est pas une dépendance de script, mais une dépendance de NPM:

array( 'wp-blocks', 'wp-components', 'wp-element', 'wp-utils', 'lodash' )

Vous ne pouvez pas le mettre en file d'attente de cette façon et attendre que votre application soit générée. Lodash est peut-être disponible dans WP Admin, mais le pack Web s'exécute dans un contexte CLI de nœud local et il ne sait pas ce que lodash est. Vous devez donc utiliser npm pour acquérir la bibliothèque et l’inclure dans votre version finale de JS via babel/webpack/etc. De cette manière, webpack/babel connaît lodash et peut faire son travail correctement.

1
Tom J Nowell