使用 wp-env 快速轻松地进行本地 WordPress 开发
有时你会有一个绝妙的想法,一个如此引人入胜的想法,以至于你立刻就想尝试一下!既然你是一名 WordPress 开发者,这意味着你想马上开始编写一个快速的概念验证。
你最不想做的事情就是浪费时间和创造力去设置一个新的本地 WordPress 实例。根据你的本地环境,这个过程可能涉及多个步骤:
- 下载并安装 WordPress,
- 创建数据库,
- 编辑
wp-config.php文件, - 等等……
所有这些事情都相当繁琐,而且没有一件是真正涉及为你的想法编写代码的。相反,它们会阻碍你前进,尽管只是暂时的,而你真正想做的是:开始!写!代码!
你可能听说过的本地开发选项
那么,使用现有的本地开发选项,你能多快开始编码呢?
Local(由 Flywheel 开发)相当不错。你只需要安装一次,之后,你就能通过一个简短且无痛的过程获得一个正常运行的 WordPress 安装,不过每次你需要开发环境时,仍然必须先启动该应用程序。
另一方面,MAMP/WAMP/XAMPP 则处于另一个极端。WAMP 和 XAMPP 要求你分别安装 Apache、PHP 和 MySQL/MariaDB。MAMP 稍微容易一些,因为 Mac 操作系统自带 PHP 和 Apache。然后,每次你想要一个新的 WordPress 站点时,你必须:
- 下载 WordPress 文件,
- 安装 WordPress 文件,
- 并费力地配置 WordPress 文件。
此外,如果你需要在本地托管多个站点,可能还必须在 Apache 中设置单独的虚拟主机。(也许你应该一开始就把那个绝妙的想法写在笔记应用里!😄)
Local 和 MAMP/WAMP/XAMPP,以及你可能使用的其他环境(如 Laravel Valet、DevKinsta 和现已遗憾停产的 DesktopServer)的另一个缺点是,它们都要求你在本地 WordPress 安装的 wp-content 目录中构建你的主题或插件。
是的,可以在其他位置进行开发,但那样你需要在 wp-content/themes 或 wp-content/plugins 中创建一个指向你开发目录的符号链接。
而你仍然还没开始编码!
那么,如果你像我一样,不想为每一个想尝试的想法都设置一个全新的 WordPress 安装,该怎么办?此外,如果你更愿意将所有开发项目都保存在一个易于备份的 /Development 目录中呢?
介绍 wp-env
<a href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/"><strong>wp-env</strong></a> 使你能够从命令行快速启动一个几乎即时的 WordPress 环境,无论你的项目在哪个目录,都无需任何配置。
Gutenberg 贡献者开发了 wp-env 来帮助开发者创建区块并为 Gutenberg 做贡献,但它可以用于任何插件或主题项目。
这是一种极其便捷的方式,可以快速轻松地启动并运行 WordPress 安装,以便你可以继续开发新项目。
正如你稍后将看到的,wp-env 也可以作为开发依赖项包含在你的项目中。这意味着参与项目协作的其他开发者可以克隆它并启动一个相同的环境。
易于安装,易于运行
安装 wp-env 极其简单。但等等,有几个先决条件。
wp-env 需要 Docker
Docker 用于将 wp-env 创建的 WordPress 安装打包到一个称为容器的沙盒进程中,这是一个虚拟化的应用程序,包含 Web 服务器、数据库和 WordPress 本身。
将你的安装放入容器中可以将其与机器上的其他进程隔离。这使 wp-env 区别于前面提到的其他环境,那些环境没有以这种方式隔离。
容器还使应用程序状态能够在应用程序的多个实例之间持久化。因此,下次你启动 wp-env 时,你所有的文章、页面和其他内容都会在你离开时的位置。
安装 Docker
设置 Docker 最简单的方法是安装 Docker Desktop。请参阅在 Windows、macOS 和 Linux 上安装 Docker Desktop 的说明。
wp-env 需要 Node/NPM
Node 是你安装 wp-env 的方式,NPM 是你运行它的方式。事实上,你对 wp-env 所做的一切,都将通过命令行完成。
如果你还没有安装 Node/NPM,请前往那里并按照安装说明操作。
现在,安装 wp-env!
所以,一旦你安装了 Docker 和 Node/NPM,你就可以安装 wp-env 了。
你可以将其安装在项目本地,也可以全局安装。理想情况下,你应该全局安装 wp-env,因为这样你将在开发机器的任何地方都可用它,用于任何你想使用的项目。
全局安装
要全局安装 wp-env,请在终端中输入此命令:
npm -g i @wordpress/env
你可以使用此命令检查安装是否成功:
wp-env --version
或者,你可以列出全局安装的 NPM 包:
npm list -g
现在,启动并运行 WordPress 很简单。只需运行命令:
wp-env start
从你想要创建项目的目录中运行。
本地安装
你也可以将 wp-env 安装在项目本地。在这种情况下,它只对该项目可用,但你可能更愿意保持 NPM 全局空间的清洁。本地安装也意味着它将是一个开发依赖项。协作者可以克隆该项目,并确保获得一个相同的环境。
要将 wp-env 本地安装到项目中,请从项目目录中输入以下代码:
npm i @wordpress/env --save-dev
这将把 wp-env 作为开发依赖项安装到项目中,并且 package.json 中的 devDependencies 属性将更新为包含以下内容:
"devDependencies": {
"@wordpress/env": "^5.14.0"
}
要在本地运行 wp-env,请在终端中键入此命令:
npx wp-env start
或者,你可以将其添加到 package.json 中的 scripts 属性:
"scripts": {
"wp-env": "wp-env"
}
然后,要运行它,请键入:
npm run wp-env start
使用 wp-env
无论你是全局安装还是项目本地安装,当 wp-env 环境启动时,你应该在终端中看到以下内容:
WordPress development site started at http://localhost:8888/
WordPress test site started at http://localhost:8889/
MySQL is listening on port 62378
MySQL for automated testing is listening on port 62379
开发站点的地址将是 http://localhost:8888/。将其输入浏览器的地址栏,你就可以开始了。
你可以像对待任何其他 WordPress 站点一样对待它,并且,如前所述,Docker 提供的容器化确保状态(即你的内容和设置)将在你从同一目录运行的 wp-env 实例之间持久化。
你会注意到端口 8888 上有一个开发站点,端口 8889 上有一个测试站点。你可能想知道,为什么有两个独立的站点?它们之间的区别在于,在测试站点中,wp-config 值 WP_DEBUG 和 SCRIPT_DEBUG 被设置为 false。测试站点为你提供了单元测试和端到端测试,你可以针对其运行自动化测试。开发站点用于使用你自己的内容进行测试。你添加到测试站点的任何内容都将在运行测试时被删除。
在环境中使用 WordPress
要访问 WordPress 管理面板,请使用 http://localhost:8888/wp-admin。登录凭据是“admin”和“password”——请不要将这些用于你的网上银行!😄
登录后,你会发现你正在处理的主题或插件已自动激活。因此,你可以直接开始处理你的项目。
开发完成后,你可以通过键入以下命令停止 wp-env:
wp-env stop
如果是全局安装,则使用上述命令;如果是项目本地安装,则使用以下命令之一:
npx wp-env stop
npm run wp-env stop
使用哪个取决于你最初是如何启动它的。
总结
差不多就是这样。就这么简单。wp-env 安装简单,使用超级简单。它巧妙地绕过了使用其他环境启动和运行 WordPress 安装所需的所有设置和配置,并且它允许你在任何你喜欢的地方进行构建,而不仅仅是在 wp-content 目录中。
还有更多!
你可以用 wp-env 做更多事情。有关命令的完整列表,请参阅区块编辑器手册中的 wp-<a rel="noreferrer noopener" href="https://developer.wordpress.org/block-editor/reference-guides/packages/packages-env/#command-reference" target="_blank">env</a> 页面。特别有用的是:
wp-env destroy
当你不再需要 Docker 容器时,此命令将删除它。
你甚至可以使用以下命令运行 WP-CLI 命令:
wp-env run cli [command]
如果你需要自定义你的 WordPress 安装,例如,如果你希望每次启动时都安装并激活某些插件,你可以在运行 wp-env 的目录中指定一个 .wp-env.json 文件。你可以在手册页面中讨论此内容的部分了解更多信息。
如果你想深入了解 wp-env 的内部工作原理,代码是 GitHub 上 Gutenberg 仓库中的一个包。
最后,为了关注未来的潜在替代方案,请留意 WordPress Playground 项目。该项目旨在使用 WASM 在浏览器中运行 WordPress。如果你想看它的实际效果,有一个演示可用。