【亲测免费】 创建古腾堡区块工具箱：create-guten-block使用指南

一、项目目录结构及介绍

当你通过 npx create-guten-block my-block 初始化项目时，它会在当前目录下创建一个名为 my-block 的文件夹，该文件夹包含了开发WordPress古腾堡区块所需的基本结构：

/my-block
├── .gitignore            # Git忽略文件
├── plugin.php            # 主插件文件，用于加载插件
├── package.json          # Node.js项目配置，列出依赖项和脚本命令
├── readme.md             # 插件的说明文档
│
├── dist                  # 生产环境编译后的代码存放目录
│   ├── blocks
│       ├── build         # 编译后的区块相关JavaScript和CSS文件
│           ├── js
│           ├── editor.css
│           └── style.css
│
├── blocks                # 开发源码目录，包含区块代码
│   └── block             # 示例区块的目录结构
│       ├── block.js      # 区块的主要逻辑实现
│
└── src                   # 源码目录，webpack等构建工具处理前的代码存放处
    ├── block             # 同上，源代码位置

二、项目的启动文件介绍

create-guten-block并不直接提供一个传统意义上的“启动文件”，但它的核心在于npm脚本，这些脚本驱动了整个开发流程。

主要脚本命令：

• npm start：用于开发模式下的运行，它会监视文件更改并实时重新编译，没有页面刷新的热重载功能。
• npm run build：生产环境构建命令，将源代码编译成优化过的、可以在WordPress部署的代码，置于dist目录下。
• npm run eject：如果你需要完全控制项目配置，可以使用此命令“脱离”create-guten-block默认设置，但这意味着之后的维护得自己来。

三、项目的配置文件介绍

create-guten-block设计为零配置（#0CJS），意味着在常规使用中，开发者不需要直接编辑复杂的配置文件。主要的配置集中在package.json文件中。

• package.json：这个文件是项目的中心，包含了项目的元数据、依赖项列表以及npm脚本。通过这些脚本，如start、build和eject，你可以进行开发、构建或定制项目配置。

{
  "name": "my-block",
  "version": "1.0.0",
  "scripts": {
    "start": "cgb-scripts start",
    "build": "cgb-scripts build",
    "eject": "cgb-scripts eject"
  },
  "dependencies": {
    // 这里列出了create-guten-block以及其他可能的区块依赖
  },
  "devDependencies": {
    // 构建工具和其他开发期间的依赖
    "create-guten-block": "^x.x.x"
  }
}

请注意，实际的依赖版本(^x.x.x)在你的项目中可能会有所不同，具体取决于你安装时的最新版本。由于create-guten-block管理着内部的cgb-scripts来自动化构建过程，开发者通常无需直接操作除package.json外的其他配置文件，除非选择通过eject自定义配置。