From 7a3e46de83d81a18d2411c652ef28992dca07756 Mon Sep 17 00:00:00 2001 From: Yucohny Date: Fri, 24 Nov 2023 15:57:07 +0800 Subject: [PATCH 1/3] docs(cn): improve translations of development-vagrant --- src/content/guides/development-vagrant.mdx | 28 +++++++++++----------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/guides/development-vagrant.mdx b/src/content/guides/development-vagrant.mdx index e02a684ae725..1d4d1961ae4c 100644 --- a/src/content/guides/development-vagrant.mdx +++ b/src/content/guides/development-vagrant.mdx @@ -1,5 +1,5 @@ --- -title: 开发 - Vagrant +title: 使用 Vagrant 在虚拟机运行开发环境 sort: 11 contributors: - SpaceK33z @@ -9,9 +9,10 @@ contributors: translators: - QC-L - lcxfs1991 + — Yucohny --- -如果你在开发一个更加高级的项目，并且使用 [Vagrant](https://www.vagrantup.com/) 来实现在虚拟机(Virtual Machine)上运行你的开发环境，那你可能会需要在虚拟机中运行 webpack。 +如果正在开发一个更加高级的项目，并且需要使用 [Vagrant](https://www.vagrantup.com/) 在虚拟机上运行开发环境，那可能会需要在虚拟机中运行 webpack。 ## 配置项目 $#configuring-the-project$ @@ -23,13 +24,13 @@ Vagrant.configure("2") do |config| end ``` -然后，在项目中安装 `webpack`、`webpack-cli`、`@webpack-cli/serve` 和 `webpack-dev-server`； +然后，在项目中安装 `webpack`、`webpack-cli`、`@webpack-cli/serve` 和 `webpack-dev-server`： ```bash npm install --save-dev webpack webpack-cli @webpack-cli/serve webpack-dev-server ``` -确保提供一个 `webpack.config.js` 配置文件。如果还没有准备，下面的示例代码可以作为起步的最简配置： +创建 `webpack.config.js` 配置文件，下面的示例代码可以作为起步的最简配置： ```js module.exports = { @@ -38,7 +39,7 @@ module.exports = { }; ``` -然后，创建一个 `index.html` 文件。其中的 `script` 标签应当指向你的 bundle。如果没有在配置中指定 `output.filename`，其默认值是 `bundle.js`。 +然后，创建一个 `index.html` 文件。其中的 `script` 标签应当指向 bundle。如果没有在配置中指定 `output.filename`，其默认值为 `bundle.js`。 ```html @@ -52,18 +53,17 @@ module.exports = { ``` -注意，你还需要创建一个 `app.js` 文件。 +注意，还需要创建一个 `app.js` 文件。 ## 启动服务器 $#running-the-server$ -现在，我们启动服务器： +现在启动服务器： ```bash webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll ``` -默认只允许从 localhost 访问服务器。所以我们需要修改 `--host` 参数， -以允许在我们的宿主 PC 上访问。 +由于默认只允许从 localhost 访问服务器，所以需要修改 `--host` 参数，以允许在我们的宿主 PC 上访问。 `webpack-dev-server` 会在包中引入一个脚本，此脚本连接到 WebSocket，这样可以在任何文件修改时，触发重新加载应用程序。 `--client-web-socket-url` 标志可以确保脚本知道从哪里查找 WebSocket。默认情况下，服务器会使用 `8080` 端口，因此也需要在这里指定。 @@ -74,9 +74,9 @@ webpack serve --host 0.0.0.0 --client-web-socket-url ws://10.10.10.61:8080/ws -- ## 配合 nginx 的高级用法 $#advanced-usage-with-nginx$ -为了更好的模拟类生产环境（production-like environment），还可以用 nginx 来代理 `webpack-dev-server`。 +为了更好的模拟类生产环境，可以使用 nginx 来代理 `webpack-dev-server`。 -在你的 nginx 配置文件中，加入下面代码： +在 nginx 配置文件中，加入下面代码： ```nginx server { @@ -103,8 +103,8 @@ server { webpack serve --client-web-socket-url ws://10.10.10.61:8080/ws --watch-options-poll ``` -现在只能通过 `127.0.0.1` 访问服务，这点关系不大，因为 ngnix 能够使得你的 PC 电脑能访问到服务器。 +现在只能通过 `127.0.0.1` 访问服务，不过这并不影响，因为 ngnix 已经能够支持 PC 电脑访问到服务器。 -## 结论 $#conclusion$ +## 总结 $#conclusion$ -我们能够从静态 IP 访问 Vagrant box，然后使 `webpack-dev-server` 可以公开访问，以便浏览器可以访问到它。然后，我们解决了 VirtualBox 不发送到文件系统事件的常见问题，此问题会导致服务器无法重新加载文件更改。 +我们能够从静态 IP 访问 VagrantBox，然后使 `webpack-dev-server` 可以公开访问，以便浏览器可以访问到它。最后解决了 VirtualBox 不发送到文件系统事件的常见问题，此问题会导致服务器无法重新加载文件更改。 From 05d333ad531fd8446c0a86fdfcfcb85ff0bf2863 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 24 Nov 2023 16:13:26 +0800 Subject: [PATCH 2/3] Update development-vagrant.mdx From dcd3ad66b748e09c959ba5016caab1939d0409cb Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Fri, 24 Nov 2023 16:16:27 +0800 Subject: [PATCH 3/3] Update development-vagrant.mdx --- src/content/guides/development-vagrant.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/guides/development-vagrant.mdx b/src/content/guides/development-vagrant.mdx index 1d4d1961ae4c..ac90dd1a9a51 100644 --- a/src/content/guides/development-vagrant.mdx +++ b/src/content/guides/development-vagrant.mdx @@ -9,7 +9,6 @@ contributors: translators: - QC-L - lcxfs1991 - — Yucohny --- 如果正在开发一个更加高级的项目，并且需要使用 [Vagrant](https://www.vagrantup.com/) 在虚拟机上运行开发环境，那可能会需要在虚拟机中运行 webpack。