将NPM模块导入Wordpress ReactJS插件

Question

我想在我的Wordpress插件中使用我发布到NPM的一些React组件 - 我正在尝试创建一个用于呈现组件的短代码。

我正在按照本教程进行调整：https://github.com/stcalica/wp-js-plugin-starter

在我的src/index.js我有：

import { AwesomeButton } from "react-awesome-button";
console.log("Start the engine!");
wp.element.render(<AwesomeButton  type="primary">Button</AwesomeButton>, document.getElementById('test-react'));

在我的控制台中，我收到此错误：

Uncaught ReferenceError: createElement is not defined
  at Object.parcelRequire.Focm.react-awesome-button (index.js?ver=1554053763:17)
    at u (index.js?ver=1554053763:1)
    at parcelRequire.J4Nk (index.js?ver=1554053763:1)
    at index.js?ver=1554053763:1

我相信这是因为Wordpress的React版本无法理解AwesomeButton的语法。有什么方法吗？我是否需要与我的babel进行更多配置？

我的其他配置文件：

这是我的.babelrc：

{
  "presets": ["@wordpress/default"]
}

这是我的插件的主要php文件：

function wp_js_plugin_starter_url( $path ) {
    return plugins_url( $path, __FILE__ );
}

/**
 * Registers the plugin's script.
 *
 * @since 1.0.0
 */
function wp_js_plugin_starter_register_script() {
    wp_register_script(
        'wp-js-plugin-starter',
        wp_js_plugin_starter_url( 'dist/index.js' ),
        array()
    );
}

/**
 * Enqueues the plugin's script.
 *
 * @since 1.0.0
 */
function wp_js_plugin_starter_enqueue_script() {
    wp_enqueue_script( 'wp-js-plugin-starter' );
}

/**
 * Trigger the script registration on init.
 */
//add_action( 'init', 'wp_js_plugin_starter_register_script' );

/**
 * Enqueue the script in all admin pages
 */
add_action('wp_enqueue_scripts', 'my_enqueue_plugin_js' );

function my_enqueue_plugin_js() {
    wp_enqueue_script(
      'wp-js-plugin-starter',
      wp_js_plugin_starter_url( 'dist/index.js' ),
      ['wp-element'],
      time(), // Change this to null for production
      true
    );
}
//add_action( 'admin_enqueue_scripts', 'wp_js_plugin_starter_enqueue_script' );
add_shortcode('test', 'test');
/**
 * Return the link to the class textbook.
 */
function test() {
    return '<div id="test-react"></div>';
}

Answer 1

我忘了从createElement导入render和wp.element函数，这是Wordpress的React库。