使用 TypeScript 入门 ReactJS – 第二部分。学习使用 Git 和 GitHub

ManishHPatil

4.86/5 (4投票s)

2017年10月23日

CPOL

6分钟阅读

19032

这是本系列的第二部分，它将展示如何为使用 TypeScript 的 ReactJS 设置开发环境。本部分将特别关注为系列第一部分中创建的代码创建一个公共 GitHub 存储库。

这是一个为期三部分的系列，用于设置和开始使用 ReactJS 和 TypeScript。本部分将展示如何为我们在第一部分中已创建的应用程序创建一个 GitHub 公共存储库。

本系列的其余部分是…

GitHub 存储库 - https://github.com/manish-patil/react-typescript

引言

这是上一篇文章的续篇，使用 TypeScript 入门 ReactJS – 第一部分，其中介绍了如何使用 VS Code 设置一个带有 TypeScript 和 WebPack 的 Hello World ReactJS 应用程序。

如前文所述，我们将为我们已创建的应用程序创建一个 GitHub 公共存储库。我们将使用本地 Git 来创建分支、提交代码并将代码推送到 GitHub。

在下一部分中，我们将学习如何使用相同的 GitHub 公共存储库来设置基本的 ReactJS 应用程序（带有 TypeScript），用于我们的新工作。

设置 GitHub 账户

所以我们从上一篇文章的结尾开始，当时我们已经运行了一个 ReactJS 应用程序，显示“Hello World!!!!”。

I – 如果您还没有 GitHub 账户，请创建一个。我已经登录了我的账户。

II – 让我们通过点击 GitHub.com 主页上的“Start a project”按钮来创建一个新的公共存储库或项目。为存储库命名并提供描述，然后点击“Create repository”按钮。

创建存储库后，您将看到类似下图的页面

此存储库将不包含任何文件。我们将把本地计算机上的所有文件推送到此存储库。

在本地设置 Git

III – 现在回到我们的计算机，找到我们的 ReactJS 应用程序所在的文件夹。我们需要使用以下命令为我们的本地工作区初始化 Git：

git init

此命令将使用默认分支 `master` 初始化一个空的 Git 存储库。当前 Git 分支 master 将以绿色字体显示在括号中。

IV – 上一步初始化了一个本地 Git 存储库，但它仍然没有连接到我们在步骤 **II** 中创建的本地代码库和 GitHub 远程存储库。让我们建立这种联系。在本地 Git Bash 中，键入以下命令并按 Enter。

git remote add origin https://github.com/manish-patil/react-typescript

该命令将为本地初始化的 git 存储库添加一个远程存储库的引用。从下面的图片可以看出，我们现在可以从远程存储库 https://github.com/manish-patil/react-typescript 中获取 (Fetch) 和推送 (Push)。另外请注意，此时远程存储库的 HEAD 分支是未知的。接下来，我们将把本地创建的分支和代码推送到远程存储库。如果您是从登录状态创建存储库，则远程存储库的位置会不同。

V – 为了将本地文件推送到远程存储库，我们首先需要选择要提交的文件，然后提交这些文件。在我们这样做之前，我们需要了解应该提交哪些文件类型。在我们的本地工作区中，`node_modules` 文件夹包含我们应用程序设置和执行所需的所有 Node 包。所有必需的包及其版本都包含在 `package.json` 文件中。所以，严格来说，如果我们只提交 `package.json` 文件而不提交 `node_modules` 文件夹，我们应该就可以了。别担心，我们将在下一篇文章中看到如何以及为什么。

因此，为了告诉 Git，我们不需要考虑 `node_modules` 或 `dist` 文件夹进行提交，我们需要创建一个名为 `.gitignore` 的文件，并在该文件中列出文件夹名称。您可以随意在此文件中添加更多文件或文件夹名称。请注意，在 Windows 中无法创建名为 `.gitignore` 的文件，因为 Windows 会将其视为一个没有名称但具有 `.gitignore` 文件扩展名的文件——您需要使用 VS Code 或 Git Bash 和以下命令来创建此文件。

touch .gitignore

现在键入 `git status` 会显示所有当前未跟踪的文件，这些文件会以红色显示，表示尚未暂存/选择提交。有趣的是，列表中忽略了 `node_modules` 和 `dist` 文件夹，但显示了 `.gitignore` 文件。

VI – 现在让我们进行暂存和提交。在 Git 中，暂存是指选择要提交的文件。我们使用以下命令选择工作区中所有已更改的文件/文件夹（不包括已忽略的）进行提交。目前，所有文件都已更改，因为还没有任何文件被提交。

git add .

该命令还有其他变体，可以用来选择特定文件。现在 `git status` 命令显示了以下内容，所有暂存的文件都以绿色显示，它们是“待提交的更改：”

我们使用以下命令提交暂存的文件

git commit –m [commit message]

将代码推送到 GitHub

VII – 现在我们的文件已提交到本地存储库，是时候将更改推送到 GitHub 上的远程存储库了。我们已经将本地存储库链接到了 GitHub 上的远程存储库。将本地更改推送到远程存储库的命令是：

git push origin master

在这里，我们要求 Git 将我们的本地存储库及其提交和历史推送到名为 `origin` 的远程存储库和名为 `master` 的分支。

现在，如果我刷新我的 GitHub 页面，我会看到下面的内容。其中分支是 master，所有文件都已上传，并且没有 `node_modules` 或 `dist` 文件夹。

添加新分支

VIII – 到目前为止，我们的 `index.html` 页面是直接从文件系统提供的，但 Web 应用程序不能直接从文件系统运行。至少需要一个本地开发服务器。我们有很多选择，但我将在这里使用 `webpack-dev-server`。您当然可以选择最适合您需求的服务器。所以，我不会将此开发服务器添加到 master 分支，而是创建一个新分支并将其添加到其中。

在 Git Bash 中，创建一个名为 `webpack-dev-server` 的新分支，并使用以下命令切换到该分支：

git checkout -b webpack-dev-server

现在我们的当前工作分支是 `webpack-dev-server`，而不是 `master`。

在 Git Bash 或 VS Code 终端中，执行以下命令，这将把 `webpack-dev-server` 安装为开发依赖项。

npm install –save-dev webpack-dev-server

在 `package.json` 文件中，将 `scripts` -> `build` 的值从 “`webpack`” 更新为 “`webpack-dev-server`”。

更新后的 `package.json` 文件如下所示：

{
  "name": "react-typescript",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "^2.3.7",
    "typescript": "^2.5.3",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3"
  },
  "dependencies": {
    "react": "^16.0.0",
    "react-dom": "^16.0.0"
  }
}

执行以下命令，这将启动 webpack 开发服务器，地址是 https://:8080/。