README

PHP库，用于PHP和WordPress应用程序，以简化使用Kanopi Pack（Webpack包装器）的开发及其发布资源的部署。Loader提供了一种系统性的方法来排队Webpack入口点生成的脚本和样式。

文档参考

类
WordPress配置说明
WordPress示例

类

Loader配置类

所有资源都使用以下配置参数集进行注册

资产加载器API类

协调从Kanopi Pack配置加载资源的底层类位于Kanopi\Assets\AssetLoader。

Webpack生成两种特殊的脚本类型，在特定时间加载，但基于应用程序/网站的现有其他资源是可选的

运行时 - 存在以协调多个包之间的共享模块。例如，如果app1.js和app2.js共享Vue3，则生成一个运行时文件（默认为runtime），必须在两者之前加载。
供应商 - 包含任何第三方导入的模块，无论是列出在require的package.json键下，还是通过@import <named_node_module>在入口点中引用。例如，如果app1.js和app2.js共享Vue3，则生成一个供应商文件（默认为vendor），必须在任何运行时和应用程序入口点之前加载。**注意** - Webpack还可以生成另一个协调文件，默认为central，始终存在于开发服务器上。

WordPress Enqueue注册表

协调Kanopi Pack与WordPress前端和块编辑器的资产排队。

API

主要WordPress注册类位于Kanopi\Assets\Registry\WordPress。

WordPress配置说明

在默认实现中，该包假定在调用包之前已定义了常量KANOPI_DEVELOPMENT_ASSET_URL，否则只有生产模式可用

WordPress示例

活动WordPress主题中的单个资源集

考虑以下Kanopi Pack入口点的示例集

module.exports = {
    //... other configuration ...
    "filePatterns": {
        "cssOutputPath": "css/[name].css",
        "entryPoints": {
            "theme": "./assets/src/scss/theme/index.scss",
            "theme-app": "./assets/src/js/theme/index.js"
        },
        "jsOutputPath": "js/[name].js"
    },
    //... other configuration ...
}

以下是一个示例加载器序列，尽管建议将其放置在模块或其他结构中。

use Kanopi\Assets\Registry\WordPress;

$loader = WordPress( 
            new LoaderConfiguration(
				WordPress::read_theme_version(),
				[ 
                    // ... list of Domain names, no protocol or path
                    'domain-name.com',
                    'staging.domain-name.com'
                 ],
				'/assets/dist/webpack-assets.json'
            )
        );

$loader->register_frontend_scripts( function ( $_registry ) {
    $loader = $_registry->asset_loader();
    $loader->register_vendor_script( 'central' );
    $loader->register_vendor_script( 'vendor' );

    $loader->register_runtime_script( 'runtime', [ 'jquery' ] );
    $loader->register_style( 'theme' );
    $loader->register_script( 'theme-app' );

    $loader->enqueue_assets();

    // Required theme stylesheet
    wp_register_style(
        'site-theme',
        esc_url_raw( get_stylesheet_directory_uri() . '/style.css' ),
        [],
        $_registry::read_theme_version();
    );
    wp_enqueue_style( 'site-theme' );
});

添加新脚本或样式

当添加新的脚本或样式时，将其句柄添加到相应的注册函数中。

考虑将新的脚本和样式添加到“歌曲”帖子类型中，如前面示例中所述。

新的配置变为

module.exports = {
    //... other configuration ...
    "filePatterns": {
        "cssOutputPath": "css/[name].css",
        "entryPoints": {
            "song": "./assets/src/scss/song/index.scss",
            "song-app": "./assets/src/js/song/index.js",
            "theme": "./assets/src/scss/theme/index.scss",
            "theme-app": "./assets/src/js/theme/index.js"
        },
        "jsOutputPath": "js/[name].js"
    },
    //... other configuration ...
}

use Kanopi\Assets\Registry\WordPress;

$loader = WordPress( 
            new LoaderConfiguration(
				WordPress::read_theme_version(),
				[ 
                    // ... list of Domain names, no protocol or path
                    'domain-name.com',
                    'staging.domain-name.com'
                 ],
				'/assets/dist/webpack-assets.json'
            )
        );

$loader->register_frontend_scripts( function ( $_registry ) {
    $loader = $_registry->asset_loader();
    $loader->register_vendor_script( 'central' );
    $loader->register_vendor_script( 'vendor' );

    $loader->register_runtime_script( 'runtime', [ 'jquery' ] );
    $loader->register_style( 'theme' );
    $loader->register_style( 'song' );
    $loader->register_script( 'theme-app' );
    $loader->register_script( 'song-app' );

    $loader->enqueue_assets();

    // Required theme stylesheet
    wp_register_style(
        'site-theme',
        esc_url_raw( get_stylesheet_directory_uri() . '/style.css' ),
        [],
        $_registry::read_theme_version();
    );
    wp_enqueue_style( 'site-theme' );
});

将Gutenberg块添加到站点