从头开始在 Windows 10 上创建 React App 默认启用额外的元数据选项启用 DNS - 尽管这些选项默认是打开的，但为了明确起见，我们在这里指定一下。

2025-06-10

从零开始在 Windows 10 上创建 React 应用

默认启用额外的元数据选项

启用 DNS – 尽管默认情况下已启用，但为了明确起见，我们仍会在此指定。

照片由 Luana De Marco 在 Unsplash 上拍摄

在 Windows 10 上设置 Web 开发环境的指南

我从事专业 Web 开发工作已经 10 个月了，期间用过 MacOS 和 Windows。我更喜欢 Windows，原因无他，就是因为我更喜欢它的键盘布局。

在 Windows/Linux 上，我喜欢用 Ctrl 键进行复制粘贴操作，这样我就可以用左手小指代替拇指了。总之，我们先不说那些站不住脚的理由，因为这不是本文的目的！

如果您没有 Windows 机器，那么这篇文章可能不适合您，如果这与您使用的不同，也并不意味着它不好。

让我们看看 Ken 对此有何看法：

这是我自 2018 年初以来在 Windows 机器上设置 Web 开发环境的指南的更新。

本指南将介绍如何安装 Ubuntu，但您也可以使用 Windows 商店中提供的一些其他版本的 Linux，Debian 的设置与 Ubuntu 的设置非常相似。

这篇文章的目标

从 Windows 10 的新实例转变为可以开发 Web 应用程序的实例。

这些说明适用于Windows 10 Fall Creators Update 及更高版本。

我们将要讨论的内容：

安装 WSL

您可以从Microsoft 商店安装 Ubuntu ，这将是安装的前半部分，后半部分将在您打开应用程序时进行。

在你的机器上启用 WSL

官方指南对此进行了很好的介绍，但如果您不想用鼠标点击，我将在这里添加快捷键。

然而在此之前，如果您还没有选择 PowerShell 作为默认命令提示符，您可以从位于“设置”中的“个性化”部分的任务栏设置页面中选择它，我建议您现在就这样做：

lsb_release 映像

与此同时，我们还应该在 Windows 文件资源管理器中启用隐藏文件夹并为已知文件类型添加文件扩展名。

使用 Windows 键 + e 打开 Windows 文件资源管理器，然后从功能区中选择“查看”。然后点击最右侧的“选项”按钮，这将打开“文件夹选项”对话框。在这里，我们需要选择“查看”选项卡，并选中“显示隐藏文件、文件夹和驱动器”的“隐藏文件和文件夹”单选按钮，同时取消选中“隐藏已知文件类型的扩展名”选项。点击“应用”，然后点击“确定”。

我们这样做的原因是我们可以.git在项目结构中看到该文件夹​​，它.env对于用于环境配置的文件等文件也是必需的。

使用 Windows 键 + x，这相当于右键单击桌面上的 Windows 图标，这将打开快速链接菜单。在这里，您需要选择 Windows PowerShell ( Admin ) 选项，您可以通过按键盘上的A 键来执行此操作。因此，按 Windows 键 + x，然后按 A 键，将打开用户帐户控制 (Admin) 提示符，假设您在计算机上拥有管理员权限，则需要单击“是”才能继续。

复制这里的代码并粘贴到PowerShell窗口中，在PowerShell中Ctrl+v起作用，按回车键即可执行命令。

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
Enter fullscreen mode Exit fullscreen mode

此后，系统将提示您重新启动机器，您应该照做。

检查链接以获取Windows 键盘快捷键的完整列表。

重启后，您可以从开始菜单打开 Ubuntu 程序，然后进行第二次安装（在您的系统上安装 WSL）。等待安装完成后，系统将提示您为该帐户创建用户和密码。您需要记住为该用户创建的密码，因为系统将提示您输入该密码才能使用sudo权限。

更新、升级和自动删除

在撰写本文时，我链接的 Ubuntu 版本是 18.04.1

链接的应用程序将在 Windows 上安装最新的稳定 Ubuntu 版本。

您可以使用以下命令检查您安装的 Ubuntu 版本：

lsb_release -a
Enter fullscreen mode Exit fullscreen mode

lsb_release 映像

如果您想使用特定的 Ubuntu LTS 版本，您可以从 Windows 商店获取它们，网址为：

现在我们将继续更新和升级所有内容，这里的三个命令将更新和升级 Ubuntu 安装附带的所有预装软件。

下面的代码是三个命令用 连接在一起的&&。-y标志用于自动接受升级过程中执行的更改。自动删除将删除升级过程中遗留的未使用的软件包。

将以下命令复制到您的 Ubuntu 终端，然后运行该命令：

sudo apt update && sudo apt -y upgrade && sudo apt autoremove
Enter fullscreen mode Exit fullscreen mode

要从 16.04 升级到 18.04，请do-release-upgrade在终端中尝试。请注意，这比删除当前安装的 Ubuntu 并重新启动要花费更长的时间。

现在基础已经安装并更新，我们需要安装build-essential包才能编译和构建其他包，我们要安装的以下包都需要它。

sudo apt install -y build-essential
Enter fullscreen mode Exit fullscreen mode

从现在开始，我建议使用两个 bash 窗口，一个启用 sudo，另一个启用标准权限。

即打开一个终端但不要进入sudo那里，而是使用已被授予该权限的终端。

原因是我发现如果你以 sudo 权限安装 node，那么每次运行npm install命令时都需要授予 sudo 权限，这会有点繁琐。而且你真的不应该用 sudo 权限安装 npm 包。

安装 Node（使用n）

让我们开始运行吧！如果你使用 Node.js，你最终会遇到需要切换 Node 版本的情况，为此你可能听说过 nvm（Node 版本管理器），顺便说一下，你仍然可以在 WSL 中使用它。

我选择 n 而不是 nvm 的原因是，过去使用 nvm 时，bash 启动速度很慢。可以查看这个WSL GitHub issue，其中详细介绍了这个问题，并附上了使用 n 的优点说明。

好的，让我们使用n-install安装 n ，该命令不以 sudo 开头，因此请在没有 sudo 权限的 bash 窗口中使用它。🧐

curl -L https://git.io/n-install | bash
Enter fullscreen mode Exit fullscreen mode

这将为我们安装最新版本的 Node，按照终端屏幕上的提示重新加载 bash：

# mine looks like this
. /home/scott/.bashrc
Enter fullscreen mode Exit fullscreen mode

node -v && npm -v现在在终端中检查我们安装的 Node 和 npm 的版本。

安装 Visual Studio Code

安装 VSCode？什么？这篇文章是要设置 WSL 吗？好吧，我们假设这是从零开始，到能够进行 Web 开发，所以我们需要一个文本编辑器，而目前市面上没有任何编辑器能与 VSCode 相提并论，如果你已经安装了文本编辑器，那么请跳到下一部分。

从下载部分安装 Windows 版 VSCode。安装完成后，我们可以在设置中启用 WSL。最快捷的方法是使用快捷键 Ctrl+' 👈 打开 VSCode 中的集成终端。系统将提示您选择默认终端，请选择 WSL Bash。

vscode-wsl-配置

安装 Windows Git

获取Git 对 VSCode 的支持存在一些障碍，链接问题中提到的各种问题都有详细记录。

还有一些解决方法，例如WSLGit，它有自己的一系列问题，这一切都源于用户（包括我）不想为 Git 安装另一个二进制文件。

在使用 Git 和 VSCode 时，我尝试了几种变体，阻力最小的路径是咬紧牙关并安装额外的二进制文件，虽然需要为 Windows 和 WSL Git 维护和配置 SSH 密钥会产生开销，但这只是一次性设置。

在 VSCode 团队将WSLGit合并到 VSCode 之前，我认为这是最好的选择。

从git-scm.com安装，链接将开始下载安装二进制文件，然后您可以打开它并完成安装，您可以继续单击下一步完成安装，我选择了一些我想要启用的选项。

Windows git 设置

现在，这就是我们需要做的全部，当使用 SSH 与 GitHub 进行身份验证时，我们将使用 Git Bash 命令行来配置 Windows 端。

安装终端（Hyper）

现在我们在 Windows 上有了 bash，是时候安装一个好用的终端应用程序了，因为，让我们面对现实吧，标准的终端应用程序有点基础。

输入Hyper，这是一个基于电子的终端应用程序，具有超强的主题性和可配置性。

下载并安装适用于 Windows 的 hyper，这将是基本版本，它看起来像这样：

基本超

您可能会注意到，这也是 Windows 命令提示符，不用担心，我们现在就进行配置。

打开.hyper.js位于用户文件夹根目录中的文件，或者从 Hyper 本身使用快捷键 Ctrl+ 弹出设置。

如果设置文件 ( .hyper.js) 在记事本中打开，则可以将默认打开方式设置为 VSCode。在文件资源管理器中（使用 Windows 键 + E 打开）导航到该文件（它位于您的用户文件夹中），右键单击该文件并选择“属性”，然后将其更改为“打开方式：”，并从列表中选择 VSCode。

基本超

现在我们可以在 Hyper 中将 WSL 设置为 shell 路径，打开.hyper.js设置文件并搜索（Ctrl+f）bash，我们希望将 WSL shell 的路径添加到shell文件中定义的属性中。

// amend shell path
// WSL Bash
shell: 'C:\\Windows\\System32\\bash.exe',
Enter fullscreen mode Exit fullscreen mode

我们还可以通过指定字体大小和字体系列以及预定义主题来从这里更改 Hyper 的外观，让我们快速将hyper-adventure-time主题添加到插件部分。

使用 Ctrl+Shift+t 打开另一个 Hyper 选项卡，这将显示 WSL 的 bash 终端。

基本超

使用超级终端键盘快捷键快速定位：

  • 新标签页 = Ctrl+Shift+t
  • 关闭当前标签页 = Ctrl+Shift+w
  • 循环切换标签页（向右）= Ctrl+Shift+向右箭头
  • 循环切换左侧选项卡 = Ctrl+Shift+向左箭头

现在我要为 Hyper 配置一些附加属性，并将主题更改为更微妙的主题。

我购买了 Dank Mono，如果您想要与 OSS 类似的字体，请查看FiraCode。

以下是我所做的更改：

module.exports = {
  config: {
    fontSize: 18,
    fontFamily: '"Dank Mono",...',
    cursorShape: 'BEAM',
    cursorBlink: true,
    copyOnSelect: true,
    plugins: ['hyper-altair']
  }
}
Enter fullscreen mode Exit fullscreen mode

安装 Fish Shell！

好了，该安装 Fish Shell 了！这完全是可选步骤，我喜欢用 Fish Shell，因为它在浏览文件结构时有很好的智能感知功能，Oh My Fish 也提供一些简洁的主题。

sudo apt -y install fish
Enter fullscreen mode Exit fullscreen mode

安装鱼

安装 Oh My Fish

现在我们可以安装 Oh My Fish (OMF) 并获得一个漂亮的终端主题了。还记得我们讨论过以正确的权限运行命令吗？好吧，这就是其中一种情况，先打开一个新标签页，然后粘贴以下内容：

curl -L https://get.oh-my.fish | fish
Enter fullscreen mode Exit fullscreen mode

安装鱼

OMF 的鱼主题

安装 OMF 后，您可以选择一个主题，在这里您可能会注意到文本不适合 Hyper 屏幕，重置它的快速方法是最大化窗口然后再返回，我使用 Windows 键 + 向上箭头最大化 Windows 键 + 向下箭头恢复它。

安装 omf 后，我选择了主题 agnoster，安装后omf install agnoster您可以通过选择列出可用的内容和已经安装的内容，omf theme让我们再次将其更改为one主题，首先调整窗口的大小，因为事情变得有点拥挤。

omf 一

试试看，那里有很多选择，我更喜欢那个主题，因为你可以在最右边看到你正在运行的 Node 版本。在这里你还可以看到 Fish 的智能感知，它显示 agnoster 是之前的选项，如果我想选择 agnoster，我可以按 Tab 键完成剩下的命令。

配置

所以，现在我们有一个时髦的新终端和一个基本的 VSCode 安装，是时候让事情开始运转了。

我有一个备忘单repo，其中详细介绍了我们将要介绍的许多配置，如果您在此过程中发现了一些有用的东西，请提出 PR 和建议。

首先，为了避免fish每次打开新终端时都输入，我也没有替换 bash（虽然你也可以这样做），但我更喜欢使用别名。所以我们要做的就是打开文件.bashrc并进行编辑。

在新的终端输入nano ~/.bashrc，nano 是一个 Bash 文本编辑器。向下滚动（或翻页）到文件底部，添加 fish 的别名，alias f=fish然后按 Ctrl+x 退出 nano，再按 确认更改y。.bashrc像我们之前使用 n 安装 Node 后那样重新加载文件. /home/scott/.bashrc，不过用户名换成了你的 😄，现在我们可以用 f 代替 fish 了！干得好，省去了额外输入三个字符的时间！！！

.bashrc 中的别名 fish

Git 配置

在开始启动 Create React App 实例之前，我们需要通过.gitconfig文件配置 Git。

我们将使用 nano 为 Git 添加一些设置，无论是在 WSL 还是 Windows 中，这是我之前提到的额外配置，抱歉！

首先，我们将配置我们的 bash 环境，然后转到 Windows 上的 Git bash。

# open up the .gitconfig file in WSL bash
# nano will create one if it doesn't exist
nano ~/.gitconfig
Enter fullscreen mode Exit fullscreen mode

除了 Windows 使用凭证辅助程序之外，两种环境的配置几乎完全相同。我个人在两种环境中都使用了它。

# not needed in WSL
[credential]
  helper = manager
[color]
  ui = true

[user]
  name = yourGitHubUserName
  email = yourGitHub@email.com

[core]
  editor = code --wait
Enter fullscreen mode Exit fullscreen mode

进行更改，然后按 Ctrl+x 退出并用 y 确认，这是 Git 配置的第一部分。

在 Windows 版 Git Bash 的终端中执行相同操作，使用 nano 创建.gitconfig文件并向其中添加设置。

创建 React 应用

好的，我们将开始创建 React 应用程序，以便我们可以使用 SSH 在 GitHub 上配置 Git，并开始进行更改以提交到 GitHub 存储库。

我们将使用npx和 Create React App 创建一个 React 入门项目。如果你想将项目存放到其他地方，现在就可以导航到那个目录了。

从终端输入：

# this will create a starter react project
# called create-react-app
npx create-react-app create-react-app
Enter fullscreen mode Exit fullscreen mode

这是在我的 home () 文件夹中创建的项目~，我必须将 gif 的速度提高 20 倍，这确实需要一段时间。🙃

呼呼呼！

因此，既然我们已经启动了一个 React 应用程序，我们应该进行更改，然后将其添加到 GitHub。

在终端中导航到 create-react-app 文件夹并打开项目。您可以使用code .命令打开 VSCode，其中.表示终端中的当前文件夹。

这将在 create-react-app 项目的根目录下打开 VSCode，通过在 npm 中运行启动脚本确保一切按预期工作。

npm run start
Enter fullscreen mode Exit fullscreen mode

如果您想查看当前项目中可用的脚本，您还可以使用npm run它来列出package.json文件中定义的 npm 命令。

将打开一个窗口，显示基本的 Create React App 登录页面，我们将向模块添加 h1 App.js，然后通过 VSCode 中的源代码控制菜单提交它。

请记住，这是一个开发环境的启动和运行指南，我不会详细介绍在 React 中的开发

当终端忙于启动 create-react-page 时，我们可以使用 Ctrl+Shift+t 在 Hyper 中打开另一个选项卡，然后使用code .命令打开 VSCode，导航到该组件并在其中的标签上方App.js添加一个标签。<h1><img><h1>Hello React!</h1>

现在，登录页面应该会显示新添加的 h1 文件，我们可以通过在终端中执行 来确认文件已在 Git 中更改git status。然后，我们可以从终端或 IDE（VSCode）提交它。我更喜欢使用 VSCode，因为它的可视化文件差异功能非常棒。

使用 Ctrl+Enter 提交更改。如果您尚未选择要提交的文件，系统会弹出一个对话框，提示您没有需要提交的暂存更改。您可以点击文件旁边的加号来选择文件（在本例中，仅选择文件）。再次按下 Ctrl+Enter 键将提交更改并显示一条消息。您可以从终端或 VSCode 中的“源代码管理”部分App.js查看是否没有需要提交的更改。git status

好的，是时候将我们超级甜蜜的代码更改添加到 GitHub 上的存储库中，供全世界查看了！

接下来，我们将学习如何将本地更改添加到 GitHub 仓库。如果您还没有 GitHub 帐户，并且正在按照教程操作，那么现在可能是注册一个的好时机。

在 GitHub 上使用 SSH

首先，我们要在 GitHub 上创建一个仓库，并推送我们所做的更改。在这里，我们将点击 GitHub 主页右上角的 + 按钮，输入仓库名称，GitHub 会提供一些默认名称供您选择。由于我们已经在本地进行了更改，因此可以忽略前几个命令，但我们需要添加远程仓库的命令：

git remote add origin git@github.com:spences10/cra.git
Enter fullscreen mode Exit fullscreen mode

并将更改推送到 GitHub，git push -u origin master但我们会收到错误，因为我们尚未设置 SSH。

WSL SSH 配置

在 Hyper 中打开一个新的 bash 选项卡并输入，在执行此操作之前ls -al ~/.ssh检查是否没有文件。rsa

您会注意到我们是在 bash 而不是 Fish 中执行此操作。

如果那里什么也没有，则使用以下命令生成新密钥：

# add your email address 👍
ssh-keygen -t rsa -b 4096 -C yourGitHub@email.com
Enter fullscreen mode Exit fullscreen mode

现在ls -al ~/.ssh将显示两个附加文件：

# there should be a private and public key-pair
id_rsa
id_rsa.pub
Enter fullscreen mode Exit fullscreen mode

启动 SSH 代理：

eval "$(ssh-agent -s)"
Enter fullscreen mode Exit fullscreen mode

使用以下命令将 RSA 密钥添加到 SSH：

ssh-add ~/.ssh/id_rsa
Enter fullscreen mode Exit fullscreen mode

现在是时候将公共 SSH 密钥添加到 GitHub 了，在 WSL 中，我们将cat ~/.ssh/id_rsa.pub在 Hyper 中复制公共 SSH 密钥，然后我们可以将其从 Hyper 复制到新的 SSH 密钥。

最后通过 GitHub 进行身份验证：

ssh -T git@github.com
Enter fullscreen mode Exit fullscreen mode

ssh 配置 wsl

Windows Git Bash SSH 配置

对于 Windows Git Bash，我们将把刚刚在 WSL 中生成的 SSH 密钥复制到 Windows Git Bash，使用 Windows Git Bash 进行身份验证时存在一些细微的差别。

从 Hyper，将 SSH 文件从 Linux 复制到 Windows：

cp ~/.ssh/* /c/Users/spenc/.ssh/
Enter fullscreen mode Exit fullscreen mode

启动 SSH 代理：

eval `ssh-agent -s`
Enter fullscreen mode Exit fullscreen mode

将密钥添加到 SSH 代理：

ssh-add ~/.ssh/id_rsa
Enter fullscreen mode Exit fullscreen mode

认证：

ssh -T git@github.com
Enter fullscreen mode Exit fullscreen mode

ssh 配置 win

现在 SSH 的附加设置已经完成，我们应该能够返回 Hyper 并将我们的更改推送到 GitHub。

最后推送 github

您可能还注意到，设置屏幕上的 SSH 密钥🔑 令牌从黑色变为绿色，这表明您已通过身份验证。

更改 WSL 版本

如果您想在 Hyper 中使用不同版本的 Ubuntu、Debian 或 Windows 商店中任何其他可用的 Linux 发行版，则需要从 PowerShell 更改默认版本：

# list available versions
wslconfig /l
# set default
wslconfig /setdefault Debian
Enter fullscreen mode Exit fullscreen mode

包起来！

就这样！我们已经从零开始搭建了一个可以正常运行的 Web 开发环境。接下来，我还要添加一些个人项目，比如 Git 和 Fish shell 的别名。如果你感兴趣的话，我有一个Fish shell 的速查表，里面列出了我使用的所有别名，你也可以在我的dotfiles仓库.gitconfig中找到。

感谢阅读🙏

这最初发布在我的 Gatsby 博客上，您可以在这里查看，如果您喜欢，请查看我的其他内容。

在Twitter上关注我或在 GitHub 上问我任何问题。

鏂囩珷鏉ユ簮锛�https://dev.to/spences10/from-scratch-to-create-react-app-on-windows-2b8h
Devto 翻译
PREV
让我做我的工作，或者你自己做
NEXT
深入验证你的副业或创业想法