web-dev-qa-db-ja.com

グーテンベルクプラグインのlodash依存関係

私はグーテンベルクブロック開発の最初のステップを踏み出しています、そして私はすでに立ち往生しています。私のブロックJSスクリプトは、2つのlodash関数（filterとpick）を利用しています。次の関数を使って自分のブロックを登録しています。

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

ご覧のとおり、lodash libを依存関係として追加し、ページのソースコードをチェックして、プラグインのスクリプトの前に効果的にロードされています。しかし、私はReferenceError: pick is not definedコンソールエラーを起こしています。

これはpick関数を呼び出す行です。

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

何が悪いのかわかりません。何か案は？

前もって感謝します

plugin-developmentjavascriptblock-editor
3
leemon

ブロックスクリプトで、私は置き換えなければなりませんでした：

import pick from 'lodash/pick';

と：

const { pick } = lodash;

そして今、それは私のために働くようです。

3
leemon

問題は、lodashがスクリプトの依存関係ではなく、NPMの依存関係であることです。

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

この方法でエンキューすることはできず、アプリケーションが構築されることを期待できません。 LodashはWP Adminで利用可能かもしれませんが、webpackはローカルのNode CLIコンテキストで実行され、lodashが何であるかわかりません。そのため、代わりにnpmを使用してライブラリを取得し、babel/webpack/etcを介してそれを最終的なJSビルドに含める必要があります。このようにwebpack/babelはlodashについて知っていて、正しく仕事をすることができます。

1
Tom J Nowell