Gutenberg插件中的Lodash依赖项

时间:2018-04-25 作者:leemon

我正在古腾堡区块开发中迈出第一步,但我已经陷入了困境。我的block JS脚本使用了几个lodash函数(filterpick). 我正在使用以下函数注册我的块:

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库作为依赖项,并检查在插件脚本之前有效加载的页面源代码。然而,我得到了ReferenceError: pick is not defined 控制台错误。

这是调用pick 功能:

onSelectImages( images ) {
    this.props.setAttributes( {
        images: images.map( ( image ) => pick( image, [ \'alt\', \'caption\', \'id\', \'url\' ] ) ),
    } );
}
我不知道我做错了什么。有什么想法吗?

提前感谢

2 个回复
最合适的回答,由SO网友:leemon 整理而成

在块脚本中,我必须替换:

import pick from \'lodash/pick\';
使用:

const { pick } = lodash;
现在它似乎对我有用。

SO网友:Tom J Nowell

问题是,lodash不是脚本依赖关系,而是NPM依赖关系:

array( \'wp-blocks\', \'wp-components\', \'wp-element\', \'wp-utils\', \'lodash\' )
您不能以这种方式将其排队并期望您的应用程序生成。Lodash可能在WP Admin中可用,但webpack在本地节点CLI上下文中运行,它不知道是什么lodash 是因此,您需要使用npm 通过babel/webpack/等获取库并将其包含在最终JS构建中。这样,webpack/babel就知道了lodash 并且能够正确地完成工作。

结束

相关推荐

不只包括在主页上的JavaScript文件

我在加载自己的javascript文件时遇到问题,这个问题只出现在主页上,在其他页面上也可以。现在我对交互性有问题,因为只有在主页上我才能做到这一点。内部功能。php我以这种方式包含了自己的脚本: function monaco_assets_js(){ wp_enqueue_script(\'script\', get_stylesheet_directory_uri() . \'../js/script.js\', array(\'jquery\'), \'1.0.0\