it-swarm.com.de

lodash-Abhängigkeit in einem Gutenberg-Plugin

Ich mache meine ersten Schritte in der Gutenberg-Blockentwicklung und stecke bereits fest. Mein Block-JS-Skript verwendet einige lodash-Funktionen (filter und pick). Ich registriere meinen Block mit der folgenden Funktion:

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',
    ) );
}

Wie Sie sehen, füge ich die lodash lib als Abhängigkeit hinzu und überprüfe den Quellcode der Seite, der effektiv vor dem Skript meines Plugins geladen wurde. Es wird jedoch ein ReferenceError: pick is not defined-Konsolenfehler angezeigt.

Dies ist die Zeile, die die Funktion pick aufruft:

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

Ich weiß nicht, was ich falsch mache. Irgendwelche Ideen?

Danke im Voraus

3
leemon

Im Blockskript musste ich ersetzen:

import pick from 'lodash/pick';

mit:

const { pick } = lodash;

Und jetzt scheint es für mich zu funktionieren.

3
leemon

Das Problem ist, dass lodash keine Skriptabhängigkeit, sondern eine NPM-Abhängigkeit ist:

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

Sie können es nicht auf diese Weise einreihen und erwarten, dass Ihre Anwendung erstellt wird. Lodash ist möglicherweise in WP Admin verfügbar, das Webpack wird jedoch in einem lokalen Knoten-CLI-Kontext ausgeführt, und es weiß nicht, was lodash ist. Sie müssen also stattdessen npm verwenden, um die Bibliothek zu erwerben und sie über babel/webpack/etc in Ihren endgültigen JS-Build aufzunehmen. Auf diese Weise kennt webpack/babel lodash und kann ihre Arbeit richtig machen.

1
Tom J Nowell