README

这个库提供了一个简单的类，该类将读取 manifest.json 并自动注册和排队找到的脚本。

manifest.json通常是一个由webpack等打包工具在构建过程中生成的文件。它可能看起来像这样

{
  "main.css": "main.63d564d3327e37de652f.css",
  "main.js": "main-63d564d3327e37de652f.js"
}

安装

通过composer安装

composer require dimezilla/wp_manifest_loader

基本用法

这很简单。为了下面的例子，我将假设你正在将其用于插件中。

1. 首先，你应该创建一个类

$loader = new MANIFEST_LOADER\AssetLoader(\plugin_dir_url(__FILE__), dirname(__FILE__), 'radcampagin', '0.0');

以下是assetloader接受的参数及其顺序

• $plugin_url - 字符串 - 当前项目路径的URL
• $plugin_path - 字符串 - 当前项目的路径
• $tag_prefix - 字符串 - 项目的标签前缀
• $version - 字符串 - 与资产关联的版本号
• $distribution_path - 字符串 - 从项目根目录到分发文件的路径，以及manifest.json的位置
• $manifest_filename - 字符串 - manifest.json文件名（如果它有不同的名称）
• $load_config - 布尔值 - 寻找配置文件并自动加载它
• $read_manifest - 布尔值 - 寻找清单并自动读取它

在上面的例子中，我们告诉资产加载器URL是WordPress为插件项目路径生成的URL。然后我们告诉资产加载器我们的项目目录路径是这个文件的当前目录。接下来，我们告诉加载器插件标签前缀是'radcampaign'。这意味着资产加载器将为文件名为main.js的文件分配一个以'radcampaign/'为前缀的句柄。因此，句柄将是'radcampaign/main.js'。所以如果你想后来在另一个脚本中作为脚本依赖项使用它，你可以这样使用它。

1. 接下来，在某种wp_enqueue_scripts钩子中调用registerAssets

add_action('wp_enqueue_scripts', function () use ($loader) {
    $loader->registerAssets();
});

registerAssets默认情况下会自动排队找到的资产。为了防止这种情况发生，你可以这样调用register assets

add_action('wp_enqueue_scripts', function () use ($loader) {
    $loader->registerAssets(false);
    // do some stuff ....
    $loader->enqueueAssets();
});

高级用法

资产特定配置

当实例化类时，这个包支持在$plugin_path设置的同一目录中放置一个asset-loader.config.json。此文件必须是有效的json，并且是一个以清单文件中找到的脚本键为键的字典。以下是我们上面例子的一个可能的配置

{
    "main.js": {
        "dependencies": ["jquery", "lodash"],
        "version": "0.1",
        "in_footer": true
    },
    "main.css": {
        "dependencies": ["bootstrap"],
        "version": "1.0",
        "media": "screen"
    }
}

此文件将注册我们的main.js脚本与jquery和lodash依赖项。它将分配版本0.1，并在页脚中加载脚本。这还将注册main.css与bootstrap依赖项，给它一个版本号为1.0，并为CSS指定“屏幕”媒体。

实例化加载器

你不必使用new MANIFEST_LOADER\AssetLoader来创建类。你也可以通过它的静态方法MANIFEST_LOADER\AssetLoader::create来创建它。此方法接受与__construct方法相同的所有参数。

延迟读取本地文件

默认情况下，当创建加载器时，如果找到asset-loader.config.json，它将加载配置。它还会尝试找到清单文件并读取它。你可以在创建类时关闭此行为，如下所示

$loader = new MANIFEST_LOADER\AssetLoader(\plugin_dir_url(__FILE__), dirname(__FILE__), 'radcampagin', '0.0', 'dist', false, false);
// or
$loader = MANIFEST_LOADER\AssetLoader::create(\plugin_dir_url(__FILE__), dirname(__FILE__), 'radcampagin', '0.0', 'dist', false, false);

// and then later, whenever you are ready
$loader->loadConfig(); // will look for the asset-loader.config.json file and read the configuration
$loader->readManifest(); // will look for the manifest file and load it into the class

assetURL 及 assetPath

在加载完清单后，你可以通过运行以下代码获取任意文件路径或URL

$loader->assetURL('main.js'); // will return the url for the file - i.e http:://example.com/wp-content/plugins/example-plugin/dist/main-a80c136812df324d6bcf.js

$loader->assetPath('main.js'); // will return the full file path for the file - i.e. /var/www/html/wp-content/plugins/example-plugin/dist/main-a80c136812df324d6bcf.js

更改初始配置

在你创建加载器后，如果你想进行一些操作，例如更改默认版本，可以使用setter方法进行更改。在这种情况下，你可以运行 $loader->setVersion('2.5');，这将默认版本更改为"2.5"。你可以通过运行 $loader->getVersion(); 使用getter函数检索默认版本，这将返回实例的默认版本。所有的setter都返回类实例，这样你可以像这样链接它们

$loader->setVersion('2.5')
    ->setDistributionPath('lib')
    ->setPluginPath('/var/www/html/wp-content/plugins/example/src');

以下是所有setter及其对应getter

• setPluginPath 及 getPluginPath
• setPluginUrl 及 getPluginUrl
• setDistributionPath 及 getDistributionPath
• setManifestFilename 及 getManifestFilename
• setVersion 及 getVersion
• setTagPrefix 及 getTagPrefix

同样，所有的这些setter函数都返回类实例。所有的getter函数不接受任何参数，并返回值。