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

【问题标题】：Including libraries from node_modules in Wordpress Plugin在 Wordpress 插件中包含来自 node_modules 的库
【发布时间】：2018-02-26 00:37:47
【问题描述】：

我正在创建一个 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' );
}

【问题讨论】：

那么在节点模块中是- 还是_？
@lawrence Cherone，捂脸。对不起。
@LawrenceCherone：我已经为我遇到的问题添加了更多信息。
问题改变了，大声笑，您也需要将它们包含在内或构建到单个文件中。
那么反对者，请解释一下您为什么反对？这是一个初级\新手问题吗？

标签： php wordpress reactjs

【解决方案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% 的包，请根据您的项目进行修改 - 这是一项正在进行的工作）。

【讨论】：