# 区块编辑器中的JavaScript开发

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

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

## 使用构建流程的JavaScript开发

采用构建流程进行区块开发能充分发挥现代JavaScript的潜力，便于使用ESNext和JSX。

[ESNext](https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_technologies_overview#standardization_process) 指的是JavaScript的最新语法和特性。[JSX](https://react.dev/learn/writing-markup-with-jsx) 是React项目开发的语法扩展，允许您编写类似HTML的JavaScript代码。

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

[webpack](https://webpack.js.org/concepts/why-webpack/) 是一个可插拔工具，用于处理和打包JavaScript以实现浏览器兼容性。[Babel](https://babeljs.io/) 作为webpack的插件，能够将ESNext和JSX转换为标准JavaScript。

配置webpack和Babel可能具有挑战性，因此建议使用 [`@wordpress/scripts`](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/) 工具包。该工具通过预配置两者来简化开发，您通常无需编写自定义的webpack或Babel配置。

入门指南请参阅 [wp-scripts入门指南](/docs/getting-started/devenv/get-started-with-wp-scripts.md)。

### `wp-scripts`概览

下图概述了使用`wp-scripts`工具包时的构建流程。该工具专为开发和生产环境的[标准配置](/docs/getting-started/devenv/get-started-with-wp-scripts.md#basic-usage)设计，开箱即用。

[![打开构建流程图](https://developer.wordpress.org/files/2023/11/build-process.png)](https://developer.wordpress.org/files/2023/11/build-process.png "打开构建流程图")

- **生产模式 (`npm run build`):** 在此模式下，`wp-scripts`会编译JavaScript并对输出进行压缩，以减小文件大小并提升浏览器加载速度。这非常适合将代码部署至生产环境。

- **开发模式 (`npm start`):** 此模式专为活跃开发定制。它会跳过压缩以便于调试，生成源码映射以优化错误追踪，并监听源文件变更。当检测到更改时，会自动重建受影响文件，让您可以实时查看更新。

`wp-scripts`工具包还支持使用JavaScript模块，允许代码分布在多个文件中，并在构建流程后生成精简的打包文件。[block-development-example](https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8) GitHub代码库提供了一些优秀示例。

<div class="callout callout-tip">
    大多数情况下无需自定义配置，但您可以在使用<code>wp-scripts</code>时提供<a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#provide-your-own-webpack-config"><code>webpack.config.js</code></a>文件来调整构建流程以满足需求。
</div>

## 无构建流程的JavaScript开发

在某些特定场景下，无需构建流程即可将JavaScript集成到WordPress项目中可能是最直接的方法。这对于不涉及JSX或其他需要编译的高级JavaScript特性的项目尤为适用。

当您选择不使用构建流程时，需通过全局`wp`对象直接与WordPress的[JavaScript API](/docs/reference-guides/packages.md)进行交互。这意味着WordPress提供的所有方法和工具包都立即可用，但需要注意：您必须手动管理脚本依赖关系。这需要将每个对应工具包的[句柄](/docs/contributors/code/scripts.md)添加到您入队JavaScript文件的依赖数组中。

例如，假设您正在创建一个使用[`blocks`](/packages/blocks/README.md)工具包中的`registerBlockVariation`函数来注册新[区块变体](/docs/reference-guides/block-api/block-variations.md)的脚本。您必须在脚本的依赖数组中包含`wp-blocks`。这能确保在脚本执行时，`wp.blocks.registerBlockVariation`方法可用且已定义。

以下示例展示了在入队`variations.js`文件时定义`wp-blocks`依赖项：

```php
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' );
```

然后在`variations.js`文件中，您可以像这样为"媒体与文本"区块注册新变体：

```js
wp.blocks.registerBlockVariation(
	'core/media-text',
	{
		name: 'media-text-custom',
		title: '自定义媒体与文本',
		attributes: {
			align: 'wide',
			backgroundColor: 'tertiary'
		},
	}
);
```

对于需要在区块编辑器中运行的脚本，请确保使用[`enqueue_block_editor_assets`](https://developer.wordpress.org/reference/hooks/enqueue_block_editor_assets/)钩子配合标准的[`wp_enqueue_script`](https://developer.wordpress.org/reference/functions/wp_enqueue_script/)函数。

更多信息请参阅[在编辑器中加载资源](/docs/how-to-guides/enqueueing-assets-in-the-editor.md)。

<div class="callout callout-tip">
    在编辑文章或使用站点编辑器时，打开浏览器开发者工具并在控制台中尝试运行<code>wp.data.select('core/editor').getBlocks()</code>。此命令将返回所有可用区块。
</div>

## 扩展资源

- [工具包参考](/docs/reference-guides/packages.md)
- [wp-scripts入门指南](/docs/getting-started/devenv/get-started-with-wp-scripts.md)
- [在编辑器中加载资源](/docs/how-to-guides/enqueueing-assets-in-the-editor.md)
- [WordPress工具包句柄](/docs/contributors/code/scripts.md)
- [JavaScript参考](https://developer.mozilla.org/en-US/docs/Web/JavaScript) | MDN Web文档
- [block-development-examples](https://github.com/WordPress/block-development-examples) | GitHub代码库
- [block-theme-examples](https://github.com/wptrainingteam/block-theme-examples) | GitHub代码库
- [webpack与WordPress工具包的交互原理](https://developer.wordpress.org/news/2023/04/how-webpack-and-wordpress-packages-interact/) | 开发者博客
- [构建流程图](https://excalidraw.com/#json=4aNG9JUti3pMnsfoga35b,ihEAI8p5dwkpjWr6gQmjuw)