在Wordpress插件中包含来自node_modules的库

Question

我正在创建一个ReactJs和wordpress插件。我已经创建了独立的Reactjs控件，现在我想将我的reactJS库包含在wordpress php文件的node_modules文件夹中，如下所示。这是正确的做法吗？Wordpress能够找到我已经入队的node_modules文件夹和库，但不能找到入队文件所依赖的库(它们位于node_modules文件夹中)。

add_action( 'wp_enqueue_scripts', 'FacebookAlbums_enqueue_scripts' );
function FacebookAlbums_enqueue_scripts() {
    wp_enqueue_script( 'react', plugin_dir_url( __FILE__ ) . 'node_modules/react/umd/react.production.min.js' );
    wp_enqueue_script( 'react-dom', plugin_dir_url( __FILE__ ) . 'node_modules/react-dom/umd/react-dom.production.min.js' );
    wp_enqueue_script( 'react-slick', plugin_dir_url( __FILE__ ) . 'node_modules/react-slick/lib/slider.js' );
    wp_enqueue_script( 'react-image-lightbox', plugin_dir_url( __FILE__ ) . 'node_modules/react-image-lightbox/dist/main.js' );
        wp_enqueue_script( 'babel', 'https://npmcdn.com/babel-core@5.8.38/browser.min.js', '', null, false );
    wp_enqueue_script( 'FacebookAlbums', plugin_dir_url( __FILE__ ) . 'FacebookAlbums.js' );
    wp_enqueue_style( 'FacebookAlbums', plugin_dir_url( __FILE__ ) . 'FacebookAlbums.css' );
}

Answer 1

将此文件放在包含依赖项的package.json所在的文件夹中：

<?php

// the generic wp node_modules loader

$package = file_get_contents(__DIR__ . '/package.json');

$package = json_decode($package, true);

foreach ($package['dependencies'] as $dep => $version) {
    $subpackage = file_get_contents(__DIR__ . "/node_modules/$dep/package.json");
    $subpackage = json_decode($subpackage, true);

    $use = 'main';

    if (isset($subpackage['browser'])) {
        $use = 'browser';
    }

    if (isset($subpackage[$use])) {
        $deps = array();

        if (strpos($dep, 'jquery') !== false) {
            $deps[] = 'jquery';
        }

        wp_enqueue_script("node_module-$dep", plugin_dir_url(__FILE__) . "node_modules/$dep/" . $subpackage[$use], $deps, $subpackage['version']);
    }

    if (isset($subpackage['style'])) {

        wp_enqueue_style("node_module-$dep", plugin_dir_url(__FILE__) . "node_modules/$dep/" . $subpackage['style']);
    }
}

你需要在你的插件中的某个地方需要这个文件。(这不适用于100%的包，请根据您的项目修改它-这是一项正在进行的工作)。