php - 在 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% 的包，请根据您的项目进行修改 - 这是一项正在进行的工作)。