60 lines
2.2 KiB
Markdown
60 lines
2.2 KiB
Markdown
|
# 开发平台
|
|||
|
|
|
|||
|
|
古腾堡项目不仅致力于为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)。
|