剖析 WordPress `wp_enqueue_script()` 函数在 Gutenberg 中的源码：如何处理编辑器和前端的脚本依赖。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Gutenberg 时代的 `wp_enqueue_script()` 讲座：前端老炮的新挑战

大家好，我是你们今天的讲师，叫我老码农就好。今天咱们聊聊 WordPress 里一个古老而又重要的函数：wp_enqueue_script()。这玩意儿在 Gutenberg 时代，可不仅仅是加载 JavaScript 那么简单了，它关系到你的编辑器体验，也影响着前端页面的性能。所以，今天咱们就来好好剖析一下，看看它在 Gutenberg 里是怎么玩的。

一、wp_enqueue_script()：老朋友，新任务

首先，我们回顾一下 wp_enqueue_script() 的基本用法。这函数的作用很简单，就是告诉 WordPress，我们需要加载一个 JavaScript 文件，并且可以指定它依赖的其他脚本。

基本语法如下：

wp_enqueue_script(
    string   $handle,      // 脚本的唯一标识符
    string   $src = '',     // 脚本的 URL
    array    $deps = array(), // 脚本依赖的其他脚本的句柄数组
    string   $ver = false,  // 脚本的版本号，用于缓存刷新
    bool     $in_footer = false // 是否在页面底部加载
);

$handle: 就像你的脚本的名字，全局唯一，方便以后引用和管理。
$src: 脚本文件的地址，可以是绝对地址，也可以是相对地址。
$deps: 一个数组，里面放着其他脚本的 $handle。比如，你的脚本依赖 jQuery，那就把 ‘jquery’ 放进去。
$ver: 脚本的版本号。WordPress 会把这个版本号添加到脚本的 URL 后面，这样，当你的脚本更新后，浏览器就会自动加载新版本，避免缓存问题。
$in_footer: 布尔值，决定脚本是在 <head> 里加载，还是在 </body> 前面加载。通常，为了提高页面加载速度，我们会把脚本放在底部加载。

二、Gutenberg 中的 wp_enqueue_script()：不仅仅是前端

在 Gutenberg 出现之前，wp_enqueue_script() 大部分情况下都是为了加载主题或插件的前端脚本。但 Gutenberg 的出现，改变了这一切。 Gutenberg 本身就是一个 JavaScript 应用，而我们开发的区块，也需要用到大量的 JavaScript 代码。这些代码，一部分运行在编辑器里，一部分运行在前端页面。所以，wp_enqueue_script() 在 Gutenberg 里，承担了双重任务：

加载编辑器脚本：让你的区块在编辑器里正常工作。
加载前端脚本：让你的区块在前端页面正常显示。

三、编辑器脚本与前端脚本：区分与共享

一个关键的问题是：如何区分哪些脚本是编辑器用的，哪些是前端用的？以及，哪些脚本可以同时被编辑器和前端使用？

WordPress 提供了一些函数和技巧来解决这个问题：

is_admin() 函数：这是一个全局函数，用于判断当前是否在 WordPress 后台（包括编辑器）。你可以在 wp_enqueue_scripts 钩子里使用它，根据返回值来决定是否加载编辑器脚本。
enqueue_block_editor_assets 钩子：这是一个专门为编辑器准备的钩子。你可以在这个钩子里加载你的编辑器脚本。
条件加载：结合 is_admin() 和 enqueue_block_editor_assets，你可以实现更精细的控制，比如只在特定的编辑器页面加载脚本。

四、实战演练：一个简单的区块示例

为了更好地理解，我们来创建一个简单的区块，看看 wp_enqueue_script() 是如何工作的。

注册区块

首先，我们需要注册一个区块。这通常在你的插件或主题的 functions.php 文件中完成。

<?php
/**
 * 注册一个简单的区块
 */
function my_custom_block() {
    register_block_type( 'my-plugin/my-block', array(
        'editor_script' => 'my-block-editor-script', // 编辑器脚本的句柄
        'script'        => 'my-block-frontend-script', // 前端脚本的句柄
        'style'         => 'my-block-frontend-style', // 前端样式
        'editor_style'  => 'my-block-editor-style',  // 编辑器样式
    ) );
}
add_action( 'init', 'my_custom_block' );

editor_script: 指定了编辑器脚本的句柄，WordPress 会自动在编辑器中加载这个脚本。
script: 指定了前端脚本的句柄，WordPress 会自动在前端页面加载这个脚本。
style: 指定前端样式
editor_style:指定编辑器样式

注册脚本和样式

接下来，我们需要使用 wp_enqueue_script() 和 wp_enqueue_style() 来注册这些脚本和样式。

<?php
/**
 * 注册脚本和样式
 */
function my_custom_block_scripts() {

    // 注册编辑器脚本
    wp_register_script(
        'my-block-editor-script', // 句柄
        plugins_url( 'build/index.js', __FILE__ ), // 脚本 URL
        array( 'wp-blocks', 'wp-element', 'wp-editor' ), // 依赖
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.js' ) // 版本号
    );

    // 注册前端脚本
    wp_register_script(
        'my-block-frontend-script', // 句柄
        plugins_url( 'build/frontend.js', __FILE__ ), // 脚本 URL
        array( 'jquery' ), // 依赖
        filemtime( plugin_dir_path( __FILE__ ) . 'build/frontend.js' ), // 版本号
        true // 在底部加载
    );

    // 注册前端样式
    wp_register_style(
        'my-block-frontend-style', // 句柄
        plugins_url( 'build/style-index.css', __FILE__ ), // 样式 URL
        array(), // 依赖
        filemtime( plugin_dir_path( __FILE__ ) . 'build/style-index.css' ) // 版本号
    );

        // 注册编辑器样式
    wp_register_style(
        'my-block-editor-style', // 句柄
        plugins_url( 'build/index.css', __FILE__ ), // 样式 URL
        array( 'wp-edit-blocks' ), // 依赖
        filemtime( plugin_dir_path( __FILE__ ) . 'build/index.css' ) // 版本号
    );

}
add_action( 'init', 'my_custom_block_scripts' );

wp_register_script()：这个函数用于注册脚本，但不会立即加载。你需要在 wp_enqueue_scripts 或 enqueue_block_editor_assets 钩子里调用 wp_enqueue_script() 才会真正加载。
plugins_url()：这是一个方便的函数，用于获取插件目录下的文件的 URL。
filemtime()：这个函数用于获取文件的修改时间，可以作为脚本的版本号，确保浏览器加载最新的文件。
注意 editor script 的依赖项，通常包含 wp-blocks, wp-element, wp-editor 等 Gutenberg 相关的脚本。
前端脚本的依赖项，这里用的是 jquery，你可以根据实际情况修改。
wp_register_style和wp_enqueue_style的使用方法和script类似，但作用是加载样式文件。
注意wp-edit-blocks这个editor style的依赖项，表示Gutenberg编辑器基础样式。

加载编辑器脚本（重要！）

<?php
/**
 * 加载编辑器脚本
 */
function my_custom_block_editor_scripts() {
    wp_enqueue_script( 'my-block-editor-script' );
    wp_enqueue_style( 'my-block-editor-style' );
}
add_action( 'enqueue_block_editor_assets', 'my_custom_block_editor_scripts' );

enqueue_block_editor_assets：这是关键！只有在这个钩子里加载编辑器脚本，Gutenberg 才能识别并加载它们。
wp_enqueue_script( 'my-block-editor-script' ): 这一行代码告诉 WordPress，加载我们之前注册的名为 my-block-editor-script 的脚本。

前端脚本的加载

<?php
/**
 * 加载前端脚本和样式
 */
function my_custom_block_frontend_scripts() {
    if ( ! is_admin() ) {
        wp_enqueue_script( 'my-block-frontend-script' );
        wp_enqueue_style( 'my-block-frontend-style' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_custom_block_frontend_scripts' );

wp_enqueue_scripts: 这是一个通用的钩子，用于加载前端脚本。
is_admin(): 我们使用 is_admin() 函数来判断当前是否在后台。如果不在后台，才加载前端脚本。这样可以避免在编辑器里加载不必要的脚本。
wp_enqueue_script( 'my-block-frontend-script' ): 这一行代码告诉 WordPress，加载我们之前注册的名为 my-block-frontend-script 的脚本。

JavaScript 代码

现在，让我们来编写一些 JavaScript 代码。

build/index.js (编辑器脚本)

// 编辑器脚本
import { registerBlockType } from '@wordpress/blocks';
import { useBlockProps } from '@wordpress/block-editor';

registerBlockType( 'my-plugin/my-block', {
    title: 'My Custom Block',
    icon: 'smiley',
    category: 'common',
    edit: ( { attributes, setAttributes } ) => {
        // 编辑器界面
        return (
            <div { ...useBlockProps() }>
                Hello from the editor!
            </div>
        );
    },
    save: ( { attributes } ) => {
        // 保存的内容
        return (
            <div { ...useBlockProps.save() }>
                Hello from the editor!
            </div>
        );
    },
} );

build/frontend.js (前端脚本)

// 前端脚本
jQuery(document).ready(function($) {
    console.log('Hello from the frontend!');
});

build/style-index.css (前端样式)

/* 前端样式 */
.wp-block-my-plugin-my-block {
    border: 1px solid #ccc;
    padding: 10px;
}

build/index.css (编辑器样式)

/* 编辑器样式 */
.wp-block-my-plugin-my-block {
    background-color: #f0f0f0;
}

五、代码分析与总结

现在，让我们来分析一下上面的代码。

register_block_type(): 这个函数用于注册区块。 editor_script 和 script 参数告诉 WordPress，这个区块需要加载哪些脚本。
wp_register_script(): 这个函数用于注册脚本。 $deps 参数指定了脚本的依赖关系。 $in_footer 参数指定了脚本是否在底部加载。
enqueue_block_editor_assets: 这个钩子用于加载编辑器脚本。只有在这个钩子里加载的脚本，才能在编辑器里正常工作。
wp_enqueue_scripts: 这个钩子用于加载前端脚本。 is_admin() 函数用于判断当前是否在后台。

表格总结：重要函数和钩子

函数/钩子	作用
`wp_enqueue_script()`	注册和加载 JavaScript 脚本。
`wp_register_script()`	注册 JavaScript 脚本，但不立即加载。
`wp_enqueue_style()`	注册和加载 CSS 样式。
`wp_register_style()`	注册 CSS 样式，但不立即加载。
`enqueue_block_editor_assets`	专门用于加载编辑器脚本和样式。
`wp_enqueue_scripts`	用于加载前端脚本和样式。
`is_admin()`	判断当前是否在 WordPress 后台。
`register_block_type()`	注册 Gutenberg 区块。

六、高级技巧：代码共享与优化

使用 Webpack 等构建工具：现代 JavaScript 开发通常使用 Webpack、Parcel 等构建工具来管理依赖、打包代码、优化资源。你可以使用这些工具来构建你的编辑器脚本和前端脚本。
Code Splitting (代码分割)： Webpack 等构建工具支持代码分割，可以将你的代码分割成多个小文件，按需加载。这样可以提高页面加载速度。
动态导入：你可以使用 JavaScript 的 import() 语法来实现动态导入，只有在需要的时候才加载脚本。

使用 wp_localize_script() 传递数据：如果你需要在 JavaScript 代码中使用 PHP 变量，可以使用 wp_localize_script() 函数。

<?php
// 在注册脚本之后，加载脚本之前
wp_localize_script(
   'my-block-editor-script', // 脚本句柄
   'myBlockData', // JavaScript 变量名
   array(
       'apiUrl' => rest_url( 'my-plugin/v1/data' ),
       'nonce'  => wp_create_nonce( 'wp_rest' ),
   )
);

然后在你的 JavaScript 代码中，就可以使用 myBlockData.apiUrl 和 myBlockData.nonce 了。

考虑性能：尽量减少不必要的脚本加载，优化你的 JavaScript 代码，使用缓存等技术来提高页面加载速度。

七、常见问题与排错

脚本没有加载？ 检查你的脚本句柄是否正确，是否正确注册了脚本，是否在正确的钩子里加载了脚本。
脚本报错？ 检查你的 JavaScript 代码是否有语法错误，是否缺少依赖，是否正确传递了数据。
编辑器样式不生效？ 检查你的编辑器样式是否正确注册和加载，是否使用了正确的 CSS 选择器。确保你的编辑器样式不会与 Gutenberg 的默认样式冲突。
前端样式不生效？ 检查你的前端样式是否正确注册和加载，是否使用了正确的 CSS 选择器。

八、总结与展望

wp_enqueue_script() 在 Gutenberg 时代扮演着至关重要的角色。掌握它的用法，可以帮助你更好地开发 Gutenberg 区块，提高你的 WordPress 开发效率。希望今天的讲座能让你对 wp_enqueue_script() 有更深入的了解。记住，实践是检验真理的唯一标准。多写代码，多尝试，你就会越来越熟练。

好了，今天的讲座就到这里。谢谢大家！

Gutenberg 时代的 wp_enqueue_script() 讲座：前端老炮的新挑战

发表回复 取消回复

Gutenberg 时代的 `wp_enqueue_script()` 讲座：前端老炮的新挑战

发表回复取消回复