README

这是@wpackio/scripts的PHP配套工具。

它提供了您从WordPress插件或主题中正确使用从@wpackio/scripts生成的资源的所有API。

详细文档

此README仅涵盖了非常基础的快速入门指南，没有解释整体用法。

请访问我们的官方文档站点以获取详细说明。

安装

使用Composer

我们建议使用composer来使用此库。

composer require wpackio/enqueue

然后在您的插件主文件或主题的functions.php文件中，加载composer自动加载器。

<?php

// Require the composer autoload for getting conflict-free access to enqueue
require_once __DIR__ . '/vendor/autoload.php';

// Instantiate
$enqueue = new \WPackio\Enqueue( 'appName', 'outputPath', '1.0.0', 'plugin', __FILE__ );

手动

如果您不想使用composer，请下载文件Enqueue.php。

删除命名空间行namespace WPackio;，并将类名从Enqueue重命名为更通用的名称，如MyPluginEnqueue。这确保了冲突-free加载。

然后在与插件入口点或主题的functions.php文件中引入该文件。

<?php

// Require the file yourself
require_once __DIR__ . '/inc/MyPluginEnqueue.php';

// Instantiate
$enqueue = new MyPluginEnqueue( 'appName', 'outputPath', '1.0.0', 'plugin', __FILE__ );

入门

无论您选择哪种安装方式，您都必须确保在插件或主题的入口点早期实例化类。

这确保了在我们的网站前端和后端有必要的javascript来使webpack代码拆分和动态导入工作。

一个常见的模式可能如下所示。

<?php
// Assuming this is the main plugin file.

// Require the composer autoload for getting conflict-free access to enqueue
require_once __DIR__ . '/vendor/autoload.php';

// Do stuff through this plugin
class MyPluginInit {
	/**
	 * @var \WPackio\Enqueue
	 */
	public $enqueue;

	public function __construct() {
		// It is important that we init the Enqueue class right at the plugin/theme load time
		$this->enqueue = new \WPackio\Enqueue( 'wpackplugin', 'dist', '1.0.0', 'plugin', __FILE__ );
		// Enqueue a few of our entry points
		add_action( 'wp_enqueue_scripts', [ $this, 'plugin_enqueue' ] );
	}


	public function plugin_enqueue() {
		$this->enqueue->enqueue( 'app', 'main', [] );
		$this->enqueue->enqueue( 'app', 'mobile', [] );
		$this->enqueue->enqueue( 'foo', 'main', [] );
	}
}


// Init
new MyPluginInit();

调用enqueue时的默认配置

[
	'js' => true,
	'css' => true,
	'js_dep' => [],
	'css_dep' => [],
	'in_footer' => true,
	'media' => 'all',
	'main_js_handle' => null,
	'runtime_js_handle' => null,
];

main_js_handle是在3.3中添加的，可以预测性地设置主JavaScript文件的handle。这对于翻译等很有用。

runtime_js_handle是在3.4中添加的，可以预测性地设置公共运行时JavaScript的handle。这在同一文件条目中本地化/翻译依赖脚本handle时很有用。通过在运行时调用wp_set_script_translations，可以收集性地将翻译json排入所有依赖项。

有关用法和API的信息，请访问官方文档站点wpack.io。

避免多个WordPress插件中的冲突

始终要求使用最新版本的Wpackio\Enqueue。自动加载器设置为仅加载一个实例，不会与现有类冲突。

但是，如果您想加载冲突-free，请使用Strauss。

操作和过滤器

过滤器wpackio_print_public_path

接受3个参数

• $publichPathUrl 公共路径使用的URL
• $appName 应用程序名称
• $outputPath 相对于插件/主题根目录的输出路径

使用此功能可以动态更改用于代码拆分的公共路径。这可以用来将公共路径更改为CDN。

替换所有wpack.io公共路径为CDN URL的示例代码

add_filter( 'wpackio_print_public_path', 'set_public_path_to_cdn' );

function set_public_path_to_cdn( $publichPathUrl ) {
	$home_url = get_home_url(); // WordPress home url
	$cdn_url = 'https://cdn.example.com'; // CDN url

	// replace wordpress home url with cdn url
	return str_replace($home_url, $cdn_url, $publichPathUrl);
}

仅更改特定实例的wpack.io公共路径URL的示例代码

add_filter( 'wpackio_print_public_path', 'set_public_path_to_cdn', 10, 2 );

function set_public_path_to_cdn( $publichPathUrl, $appName ) {
	
	// check for our plugin
	if( 'myPlugin' !== $appName ) return $publichPathUrl;

	$home_url = get_home_url(); // WordPress home url
	$cdn_url = 'https://cdn.example.com'; // CDN url

	// replace WordPress home url with cdn url
	return str_replace($home_url, $cdn_url, $publichPathUrl);
}