# 如何构建你的第一个扩展

本指南将教你如何使用 [create-woo-extension](https://www.npmjs.com/package/@woocommerce/create-woo-extension) 来创建 WooCommerce 扩展。与从头开始手动创建扩展相比，使用 create-woo-extension 具有诸多优势，包括：

需要编写的样板代码更少，需要手动设置的依赖项也更少。

诸如 Blocks 等现代特性默认支持，并且单元测试、代码检查和 Prettier IDE 配置已准备就绪。

在设置好你的扩展后，我们将向你展示如何使用 [wp-env](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/) 快速搭建开发环境。

## 需求

在开始之前，你需要在你的设备上安装以下工具：

- [Node.js](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs) 及其 NPM
- [Docker](https://docs.docker.com/engine/install/) (使用 wp-env 时必须运行)
- [Composer](https://getcomposer.org/doc/00-intro.md)

本指南也假设你熟悉命令行操作。

## 创建您的扩展

打开您的终端，并运行以下命令：

```sh
 npx @wordpress/create-block -t @woocommerce/create-woo-extension my-extension-name
```

如果您希望设置自定义的扩展名称，可以将 `my-extension-name` 替换为任何别名。请注意，您的别名不能包含空格。

如果您看到类似 `Need to install the following packages`: `@wordpress/create-block@4.34.0. Ok to proceed?` 的提示，请按 `Y` 键。

当软件包完成您的扩展的生成后，使用以下命令进入扩展文件夹：

```sh
 cd my-extension-name
```

然后，使用 `npm install` 安装扩展的依赖项，并使用 `npm run build` 进行构建。

恭喜！您已经成功创建了一个 WooCommerce 扩展！您的扩展将具有以下文件结构：

- `my-extension-name`
    - `block.json` - 包含用于在 WordPress 中注册您的自定义区块的元数据。了解更多详情。
    - `build` - 您的扩展的构建版本，由 `npm run build` 生成。您不应直接修改此文件夹中的任何文件。
    - `composer.json` - 包含您的 PHP 依赖项列表，由 Composer 引用。
    - `composer.lock` - 此文件允许您控制何时以及如何更新这些依赖项。
    - `includes` - 在 PHP 开发中，"includes" 文件夹的主要目的是存储可重用的代码或需要在项目多个部分中包含或引用的文件。 这是一个 PHP 开发者的约定。
    - `languages` - 包含用于本地化的 POT 文件。
    - `my-extension-name.php` - 您的插件的入口点，用于在 WordPress 中注册您的插件。
    - `node-modules` - 帮助您构建应用程序的基础模块，并编写更结构化的代码。
    - `package.json` - 被认为是 Node 项目的核心。它记录元数据，安装功能性依赖项，运行脚本，并定义应用程序的入口点。
    - `README.md` - 您的应用程序的介绍和使用说明。 任何特殊说明、作者的更新以及关于应用程序的详细信息都可以在此处以文本形式编写。
    - `src` - 保持根目录的整洁，并提供源代码和其他资源之间的清晰分隔。
    - `tests` - 可以包含您应用程序的单元测试，并将它们与源代码文件分开。
    - `vendor` - 包含项目依赖项和您未编写的第三方代码。
    - `webpack.config.js` - webpack 是一个模块打包工具。 它的主要目的是将 JavaScript 文件打包以供在浏览器中使用。

## 设置开发环境

我们建议使用 `wp-env` 来搭建本地开发环境。您可以 [在此处了解更多关于 wp-env 的信息](https://make.wordpress.org/core/2020/03/03/wp-env-simple-local-environments-for-wordpress/)。 如果您尚未在本地安装 `wp-env`，可以使用以下命令进行安装：
`npm -g i @wordpress/env`.

安装完 `wp-env` 后，并且仍然在您的 `my-extension-name` 文件夹中，运行 `wp-env start` 命令。 几秒钟后，一个测试 WordPress 站点，其中包含您的 WooCommerce 和您的扩展程序，将在 `localhost:8888` 上运行。

如果您没有为您的扩展程序设置自定义名称，您可以访问 `wp-admin/admin.php?page=wc-admin&path=%2Fmy-extension-name` 来查看由 `/src/index.js` 生成的 **设置页面**。 `wp-env` 的默认用户名/密码组合是 `admin` / `password`。

## 下一步

现在您已经搭建好了您的扩展程序，您可以开始添加一些功能了！ 以下是一些您可以包含的简单功能：

[如何将自定义字段添加到简单产品和可变产品](https://developer.woocommerce.com/docs/how-to-add-a-custom-field-to-simple-and-variable-products/)

## 参考

[访问 NPM 上的 @woocommerce/create-woo-extension 以获取包的参考信息](https://www.npmjs.com/package/@woocommerce/create-woo-extension)
[查看 wp-env 的命令参考，以了解更多关于高级功能的信息](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/#command-reference)