Gutenberg 与 WordPress Block 开发入门在 Node.js 开发环境下安装与配置 node、npm、npx【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读本文是 GutenbergWordPress Block Editor开发环境系列指南的一部分围绕 Node.js development environment 展开讲解为 Block Editor 开发搭建 Node.js 运行时环境的完整过程包括 Mac/Linux 下通过nvm安装与管理 Node.js、Windows 及其他平台的安装方式、.nvmrc版本约定以及常见故障排查。读完本文你将掌握一套可复现、可验证的 Node.js 工具链搭建方法为后续使用wp-scripts、create-block、wp-env等 WordPress 官方开发工具打下基础。Node.js 开发环境在 Block 开发中的定位在 Gutenberg 生态中开发 Block块或插件通常需要一套基于 Node.js 的现代 JavaScript 工具链。node是一个开源运行时环境让你可以在终端命令行接口CLI / shell中直接执行 JavaScript 代码它通常不直接参与 WordPress 站点的运行但却是编译、打包、测试和脚手架生成等所有现代前端开发流程的基础。安装node会自动附带两个高频使用的工具npmNode Package Manager承担依赖管理与脚本执行两大职责。例如通过npm install安装wordpress/scripts通过npm run start触发构建脚本。它是 WordPress 官方文档中推荐并广泛使用的包管理器。npxNode Package eXecute用于直接执行某个包提供的命令而无需将其全局安装。最常见的场景是用npx wordpress/create-block快速脚手架生成一个 Block 插件。在继续之前建议先阅读 Block Development Environment 了解开发环境的整体组成——它由代码编辑器、Node.js 开发工具和本地 WordPress 环境三部分组成本文只负责其中的 Node.js 部分。Mac 与 Linux使用nvm安装 Node.js官方推荐使用Node Version Managernvm安装 Node.js。它的核心优势是可以在用户主目录下安装并管理多个特定版本的node切换版本无需管理员权限也避免了对系统全局环境的污染和权限问题。快速安装步骤如下打开终端执行以下命令安装nvm。macOS 默认未安装所需的开发者工具如果被提示安装请按提示完成后再继续curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash退出并重新打开终端让nvm的 shell 配置生效。在终端执行nvm install --lts安装最新的 LTSLong Term Support长期支持版本 Node.js。对于 Block 开发官方建议使用 Active LTS 版本。执行node -v和npm -v验证node与npm是否安装成功并确认版本号。如果你需要特定版本的 Node.js也可以精确安装例如nvm install 18 # 安装 18.x nvm use 18 # 切换到 18.xnvm use [version-number]用于在不同已安装版本之间切换nvm install [version-number]用于安装指定版本。善用.nvmrc让版本选择自动化类似 Gutenberg 这样的大型项目会在仓库根目录放置一个 .nvmrc 文件用于声明项目推荐的 Node.js 版本。当前仓库的 .nvmrc 内容为24.18当你在项目根目录执行nvm use时nvm会自动读取.nvmrc并切换到对应版本如果该版本尚未安装nvm会报错并提示需要安装的版本号此时执行nvm install [version-number]后再nvm use即可。从仓库的根 package.json 可以看到当前 Gutenberg 项目对运行环境有明确约束engines: { node: 24.18.0, npm: 11.16.0 }也就是说仅满足 LTS 版本还不够参与本仓库开发时 Node.js 至少需要 24.18.0、npm 至少需要 11.16.0。这也解释了为什么官方强烈推荐使用版本管理器不同项目可能对 Node.js 版本有不同要求随时可切换的nvm是最省心的方案。补充说明从仓库中wordpress/scripts的 package.json 可以看到该包声明的引擎为node: ^22.22.2 || ^24.15.0 || 26.0.0、npm: 8.19.2wordpress/create-block的 package.json 声明node: 20.10.0。如果你不参与 Gutenberg 本体的开发、而只是用这些包开发自己的 Block请以对应包的引擎声明为准选择 Node.js 版本。Windows 及其他平台安装 Node.jsWindows 用户可以直接从 Node.js 官网下载安装包官网提供 Windows 与 Mac 的安装包以及 Linux 的二进制文件建议选择最新版本。微软官方也提供了详细的指南介绍如何在 Windows 和 WSLWindows Subsystem for Linux上安装nvm、Node.js 与 npm在有 Windows 与 Linux 双环境需求时尤其推荐参考。故障排查报错zsh: command not found: nvm如果在尝试安装node时遇到zsh: command not found: nvm通常是因为nvm的初始化代码没有被写入默认的 shell 配置文件macOS 默认 shell 是zsh需要先创建配置文件touch ~/.zshrc文件已存在时执行无副作用Ubuntu包括 WSL默认配置是bash应执行touch ~/.bashrc。创建完成后重新执行上文安装步骤中的第 24 步重启终端 →nvm install --lts→node -v/npm -v验证。版本兼容性问题最新的node版本对大多数开发项目都能正常工作但部分包和工具对 Node.js 版本有特定要求。如果遇到兼容性问题可以安装并使用更早的node版本。同时务必检查项目是否带有.nvmrc文件并遵循其中指示的版本——例如 Gutenberg 的 .nvmrc 指向24.18。验证环境并进入下一步完成以上步骤后你可以通过以下命令快速确认工具链就绪node -v # 查看 node 版本例如 v24.18.0 npm -v # 查看 npm 版本例如 11.xNode.js 环境就绪后就可以继续搭建 Block 开发环境的其余部分使用create-block通过npx wordpress/create-blocklatest todo-list快速脚手架一个 Block 插件使用wp-scripts执行npm run start/npm run build完成开发与生产构建使用wp-env搭建本地 WordPress 环境参见 Get started with wp-env。这三者共同构成了完整的 WordPress Block 开发工作流而一个正确配置的 Node.js 环境是这一切的前提。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Gutenberg 与 WordPress Block 开发入门：在 Node.js 开发环境下安装与配置 node、npm、npx
Gutenberg 与 WordPress Block 开发入门在 Node.js 开发环境下安装与配置 node、npm、npx【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg导读本文是 GutenbergWordPress Block Editor开发环境系列指南的一部分围绕 Node.js development environment 展开讲解为 Block Editor 开发搭建 Node.js 运行时环境的完整过程包括 Mac/Linux 下通过nvm安装与管理 Node.js、Windows 及其他平台的安装方式、.nvmrc版本约定以及常见故障排查。读完本文你将掌握一套可复现、可验证的 Node.js 工具链搭建方法为后续使用wp-scripts、create-block、wp-env等 WordPress 官方开发工具打下基础。Node.js 开发环境在 Block 开发中的定位在 Gutenberg 生态中开发 Block块或插件通常需要一套基于 Node.js 的现代 JavaScript 工具链。node是一个开源运行时环境让你可以在终端命令行接口CLI / shell中直接执行 JavaScript 代码它通常不直接参与 WordPress 站点的运行但却是编译、打包、测试和脚手架生成等所有现代前端开发流程的基础。安装node会自动附带两个高频使用的工具npmNode Package Manager承担依赖管理与脚本执行两大职责。例如通过npm install安装wordpress/scripts通过npm run start触发构建脚本。它是 WordPress 官方文档中推荐并广泛使用的包管理器。npxNode Package eXecute用于直接执行某个包提供的命令而无需将其全局安装。最常见的场景是用npx wordpress/create-block快速脚手架生成一个 Block 插件。在继续之前建议先阅读 Block Development Environment 了解开发环境的整体组成——它由代码编辑器、Node.js 开发工具和本地 WordPress 环境三部分组成本文只负责其中的 Node.js 部分。Mac 与 Linux使用nvm安装 Node.js官方推荐使用Node Version Managernvm安装 Node.js。它的核心优势是可以在用户主目录下安装并管理多个特定版本的node切换版本无需管理员权限也避免了对系统全局环境的污染和权限问题。快速安装步骤如下打开终端执行以下命令安装nvm。macOS 默认未安装所需的开发者工具如果被提示安装请按提示完成后再继续curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash退出并重新打开终端让nvm的 shell 配置生效。在终端执行nvm install --lts安装最新的 LTSLong Term Support长期支持版本 Node.js。对于 Block 开发官方建议使用 Active LTS 版本。执行node -v和npm -v验证node与npm是否安装成功并确认版本号。如果你需要特定版本的 Node.js也可以精确安装例如nvm install 18 # 安装 18.x nvm use 18 # 切换到 18.xnvm use [version-number]用于在不同已安装版本之间切换nvm install [version-number]用于安装指定版本。善用.nvmrc让版本选择自动化类似 Gutenberg 这样的大型项目会在仓库根目录放置一个 .nvmrc 文件用于声明项目推荐的 Node.js 版本。当前仓库的 .nvmrc 内容为24.18当你在项目根目录执行nvm use时nvm会自动读取.nvmrc并切换到对应版本如果该版本尚未安装nvm会报错并提示需要安装的版本号此时执行nvm install [version-number]后再nvm use即可。从仓库的根 package.json 可以看到当前 Gutenberg 项目对运行环境有明确约束engines: { node: 24.18.0, npm: 11.16.0 }也就是说仅满足 LTS 版本还不够参与本仓库开发时 Node.js 至少需要 24.18.0、npm 至少需要 11.16.0。这也解释了为什么官方强烈推荐使用版本管理器不同项目可能对 Node.js 版本有不同要求随时可切换的nvm是最省心的方案。补充说明从仓库中wordpress/scripts的 package.json 可以看到该包声明的引擎为node: ^22.22.2 || ^24.15.0 || 26.0.0、npm: 8.19.2wordpress/create-block的 package.json 声明node: 20.10.0。如果你不参与 Gutenberg 本体的开发、而只是用这些包开发自己的 Block请以对应包的引擎声明为准选择 Node.js 版本。Windows 及其他平台安装 Node.jsWindows 用户可以直接从 Node.js 官网下载安装包官网提供 Windows 与 Mac 的安装包以及 Linux 的二进制文件建议选择最新版本。微软官方也提供了详细的指南介绍如何在 Windows 和 WSLWindows Subsystem for Linux上安装nvm、Node.js 与 npm在有 Windows 与 Linux 双环境需求时尤其推荐参考。故障排查报错zsh: command not found: nvm如果在尝试安装node时遇到zsh: command not found: nvm通常是因为nvm的初始化代码没有被写入默认的 shell 配置文件macOS 默认 shell 是zsh需要先创建配置文件touch ~/.zshrc文件已存在时执行无副作用Ubuntu包括 WSL默认配置是bash应执行touch ~/.bashrc。创建完成后重新执行上文安装步骤中的第 24 步重启终端 →nvm install --lts→node -v/npm -v验证。版本兼容性问题最新的node版本对大多数开发项目都能正常工作但部分包和工具对 Node.js 版本有特定要求。如果遇到兼容性问题可以安装并使用更早的node版本。同时务必检查项目是否带有.nvmrc文件并遵循其中指示的版本——例如 Gutenberg 的 .nvmrc 指向24.18。验证环境并进入下一步完成以上步骤后你可以通过以下命令快速确认工具链就绪node -v # 查看 node 版本例如 v24.18.0 npm -v # 查看 npm 版本例如 11.xNode.js 环境就绪后就可以继续搭建 Block 开发环境的其余部分使用create-block通过npx wordpress/create-blocklatest todo-list快速脚手架一个 Block 插件使用wp-scripts执行npm run start/npm run build完成开发与生产构建使用wp-env搭建本地 WordPress 环境参见 Get started with wp-env。这三者共同构成了完整的 WordPress Block 开发工作流而一个正确配置的 Node.js 环境是这一切的前提。【免费下载链接】gutenbergThe Block Editor project for WordPress and beyond. Plugin is available from the official repository.项目地址: https://gitcode.com/GitHub_Trending/gu/gutenberg创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考