# 开发平台

古腾堡项目不仅致力于为WordPress打造更优秀的编辑器，更在构建一个可扩展的开发平台。该平台包含一系列可用于Web应用程序的JavaScript工具包。[查看npm上的可用工具包列表](https://www.npmjs.com/org/wordpress)。

## 用户界面组件

[WordPress组件包](/packages/components/README.md)提供了一系列可在项目中直接使用的UI组件。访问[WordPress Storybook网站](https://wordpress.github.io/gutenberg/)可交互式查看可用组件及其设置。

以下是在项目中使用组件的快速示例：

安装依赖：

```bash
npm install --save @wordpress/components
```

在React中使用：

```jsx
import { Button } from '@wordpress/components';

function MyApp() {
	return <Button>Hello Button</Button>;
}
```

多数组件包含样式CSS文件，需要引入才能正常显示样式。组件样式表位于`node_modules/@wordpress/components/build-style/style.css`，可直接链接或复制到项目中引入。

## 开发脚本

[`@wordpress/scripts`工具包](/packages/scripts/README.md)是一组可复用的JavaScript开发脚本——包含构建、代码检查和测试脚本，无需额外配置文件即可使用。

以下是使用`wp-scripts`工具的快速示例：

安装依赖：

```bash
npm install --save-dev @wordpress/scripts
```

在package.json文件中添加脚本配置：

```json
	"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:js": "wp-scripts lint-js",
		"start": "wp-scripts start"
	}
```

配置后即可使用`npm run build`命令，通过预设的webpack配置构建项目，代码格式化和检查同理。`start`命令用于开发模式。完整文档请参阅[`@wordpress/scripts`工具包](/packackages/scripts/README.md)。

更多信息请参考区块编辑器手册中的[JavaScript入门教程](/docs/how-to-guides/javascript/js-build-setup.md)。

## 区块编辑器

[`@wordpress/block-editor`工具包](https://developer.wordpress.org/block-editor/packages/packages-block-editor/)支持创建和使用独立的区块编辑器。

详细了解请阅读[“构建自定义区块编辑器”教程](/docs/how-to-guides/platform/custom-block-editor.md)。