title: "为区块编辑器使用 JavaScript" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - Fundamentals - Getting Started - Repos

为区块编辑器使用 JavaScript

为区块编辑器开发区块通常涉及使用现代 JavaScript（ESNext 和 JSX），区块编辑器手册中的大多数示例都采用这些语法编写。

然而，这种形式的 JavaScript 必须转换为浏览器兼容的格式，因此需要构建步骤。这个过程会将 JavaScript 源代码和相关资源转换、打包并优化为适合生产环境的格式。

使用构建流程的 JavaScript

为区块开发使用构建流程能够释放现代 JavaScript 的全部潜力，便于使用 ESNext 和 JSX。

ESNext 指的是 JavaScript 最新的语法和特性。JSX 是由 React 项目开发的语法扩展，它让你可以编写类似 HTML 的 JavaScript。

由于浏览器无法直接执行 ESNext 和 JSX，这些语法必须被转换成浏览器兼容的 JavaScript。

webpack 是一个可插拔的工具，用于处理和打包 JavaScript 以实现浏览器兼容性。Babel 是 webpack 的一个插件，可将 ESNext 和 JSX 转换为标准的 JavaScript。

配置 webpack 和 Babel 可能具有挑战性，因此建议你使用 @wordpress/scripts 包。该工具预先配置了这两者，从而简化了开发，因此你很少需要编写自定义的 webpack 或 Babel 配置。

入门介绍，请参阅 wp-scripts 入门指南。

wp-scripts 概览

下图概述了使用 wp-scripts 包时的构建流程。它旨在开箱即用地适用于开发和生产环境的标准配置。

• 生产模式 (npm run build): 在此模式下，wp-scripts 会编译你的 JavaScript，压缩输出以减少文件大小并提升浏览器加载速度。这非常适合将代码部署到线上站点。

• 开发模式 (npm start): 此模式专为活跃开发而设计。它跳过压缩以便于调试，生成源映射以更好地追踪错误，并监视你的源文件变化。当检测到更改时，它会自动重新构建受影响的文件，让你能够实时看到更新。

wp-scripts 包还支持使用 JavaScript 模块，允许将代码分布在多个文件中，并在构建过程后生成精简的捆绑包。block-development-example GitHub 仓库提供了一些很好的示例。

JavaScript without a build process

Integrating JavaScript into your WordPress projects without a build process can be the most straightforward approach in specific scenarios. This is particularly true for projects that don't leverage JSX or other advanced JavaScript features requiring compilation.

When you opt out of a build process, you interact directly with WordPress's JavaScript APIs through the global wp object. This means that all the methods and packages provided by WordPress are readily available, but with one caveat: you must manually manage script dependencies. This is done by adding the handle of each corresponding package to the dependency array of your enqueued JavaScript file.

For example, suppose you're creating a script that registers a new block variation using the registerBlockVariation function from the blocks package. You must include wp-blocks in your script's dependency array. This guarantees that the wp.blocks.registerBlockVariation method is available and defined by the time your script executes.

In the following example, the wp-blocks dependency is defined when enqueuing the variations.js file.

function example_enqueue_block_variations() {
    wp_enqueue_script(
        'example-enqueue-block-variations',
        get_template_directory_uri() . '/assets/js/variations.js',
        array( 'wp-blocks' ),
        wp_get_theme()->get( 'Version' ),
        false
    );
}
add_action( 'enqueue_block_editor_assets', 'example_enqueue_block_variations' );

Then in the variations.js file, you can register a new variation for the Media & Text block like so:

wp.blocks.registerBlockVariation(
    'core/media-text',
    {
        name: 'media-text-custom',
        title: 'Media & Text Custom',
        attributes: {
            align: 'wide',
            backgroundColor: 'tertiary'
        },
    }
);

For scripts that need to run in the Block Editor, make sure you use the enqueue_block_editor_assets hook coupled with the standard wp_enqueue_script function.

Refer to Enqueueing assets in the Editor for more information.

Additional resources

• Package reference
• Get started with wp-scripts
• Enqueueing assets in the Editor
• WordPress package handles
• JavaScript reference | MDN Web Docs
• block-development-examples | GitHub repository
• block-theme-examples | GitHub repository
• How webpack and WordPress packages interact | Developer Blog
• Build process diagram