「译」使用Yarn，TypeScript，esbuild，React和Express创建Web应用程序（第1部分）

604次阅读  |  发布于3年以前

这是一个如何使用 Yarn、TypeScript、esbuild、React和Express快速构建web应用的系列教程。

本文将指导您使用Yarn包管理器、TypeScript、esbuild，Express和React来构建基本的Web应用程序。在文章的结束部分，您将拥有一个可完全构建和部署的Web应用程序。

1. 项目配置（第1部分）

1 ) 工作空间

2 ) TypeScript

3 ) 添加第一个脚本

4 ) 准备 fot Git

2 . 添加代码（第2部分）

3 . 构建应用程序（第3部分）

4. 更进一步（高级篇）

https://github.com/halftheopposite/tutorial-app 查看代码库。

该项目将被构造为monorepo。monorepo的目标是提高模块之间共享的代码量，并更好地预测这些模块如何一起通信（例如在微服务体系结构中）。出于本练习的目的，我们将使结构保持简单：

设置项目之前的唯一要求是已yarn安装在您的计算机上。Yarn是与相同的软件包管理器npm，但性能更高，功能更多。您可以在官方文档中阅读有关如何安装它的更多信息。

https://classic.yarnpkg.com/en/docs/install/

工作空间

打开命令行操作工具，切换至要初始化项目的文件夹，然后通过以下脚本构建项目的基本结构：

1）使用 mkdir my-app (项目名称根据自己喜好随意命名)

2）通过 cd my-app 进入 my-app 目录

3) 使用 yarn init 初始化项目配置。如果您不想使用 yarn init 命令，则可以手动创建文件，并复制以下内容至其中：

{
  "name": "my-app",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "private": true // Required for yarn workspace to work
}

现在，该 package.json 文件已被创建成功。我们需要创建的文件夹为我们的模块app，common和server。为了方便发现模块yarn workspace并提高项目的可读性，我们将模块嵌套在以下packages文件夹中：

my-app/
├─ packages/ // Where all our current and future modules will live
│  ├─ app/
│  ├─ common/
│  ├─ server/
├─ package.json

我们的每个模块都将充当一个小型且独立的项目，并且需要自己的模块package.json来管理依赖项。要设置它们中的每一个，我们可以使用yarn init（在每个文件夹中）或手动创建文件。

软件包名称使用的命名约定是在每个软件包前面加上@my-app/*。这在NPM领域中称为作用域（您可以在此处阅读更多内容）。您不必像这样给自己加上前缀，但以后会有所帮助。

https://docs.npmjs.com/about-scopes

一旦创建并初始化了所有三个基础模块（软件包），您将具有如下所示的结构

app模块

{
  "name": "@my-app/app",
  "version": "0.1.0",
  "license": "UNLICENSED",
  "private": true
}

common模块

{
  "name": "@my-app/common",
  "version": "0.1.0",
  "license": "UNLICENSED",
  "private": true
}

server模块

{
  "name": "@my-app/server",
  "version": "0.1.0",
  "license": "UNLICENSED",
  "private": true
}

最后，我们需要告诉要yarn在哪里查找模块，因此请返回并编辑项目的package.json文件并添加以下workspaces属性（如果您想了解更多有关详细信息，请查看Yarn的工作区文档）。

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"] // Add this here
}

您的最终文件结构如下所示：

my-app/
├─ packages/
│  ├─ app/
│  │  ├─ package.json
│  ├─ common/
│  │  ├─ package.json
│  ├─ server/
│  │  ├─ package.json
├─ package.json

截止目前，您已经完成了我们项目设置的基础工作。

TypeScript

现在，我们将第一个依赖包TypeScript添加到我们的项目中。TypeScript是JavaScript的超集，可以在构建时实时进行类型检测。

通过终端进入项目根文件夹，然后运行

yarn add -D -W typescript

1. Argument -D 将TypeScript添加到中，devDependencies因为我们仅在开发和构建期间使用它。
2. 参数-W 允许在工作区根目录要安装的软件包中，使其能够在全球范围内app，common和server。

此时，您的package.json 文件应该看起来像：

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "typescript": "^4.2.3"
  }
}

这还将创建一个yarn.lock文件（确保在项目的整个生命周期中，依赖项的预期版本保持不变）和一个node_modules文件夹，其中包含我们的依赖项的二进制文件。

现在我们已经安装了TypeScript，一个好习惯是告诉它如何表现。为此，我们将添加一个配置文件，该文件应由您的IDE拾取（如果使用VSCode，则会自动获取）。

在项目的根目录下，创建一个tsconfig.json文件，并将以下内容复制到其中：

{
  "compilerOptions": {
    /* Basic */
    "target": "es2017",
    "module": "CommonJS",
    "lib": ["ESNext", "DOM"],

    /* Modules Resolution */
    "moduleResolution": "node",
    "esModuleInterop": true,

    /* Paths Resolution */
    "baseUrl": "./",
    "paths": {
      "@flipcards/*": ["packages/*"]
    },

    /* Advanced */
    "jsx": "react",
    "experimentalDecorators": true,
    "resolveJsonModule": true
  },
  "exclude": ["node_modules", "**/node_modules/*", "dist"]
}

您可以轻松地搜索每个compilerOptions属性及其动作，但是对我们来说最有用的是paths属性。例如，这可以告诉TypeScript在包中使用@my-app/common导入时在哪里查找代码和键入内容。@my-app/server@my-app/app

此时，您的项目结构应如下所示:

my-app/
├─ node_modules/
├─ packages/
│  ├─ app/
│  │  ├─ package.json
│  ├─ common/
│  │  ├─ package.json
│  ├─ server/
│  │  ├─ package.json
├─ package.json
├─ tsconfig.json
├─ yarn.lock

添加第一个脚本文件

Yarn工作区允许我们通过yarn workspace @my-app/*命令模式访问任何子包，但是每次键入完整的命令将变得非常多余。这就是为什么我们可以创建一些帮助程序脚本方法来简化我们的开发人员体验的原因。package.json在项目的根目录中打开，然后向其中添加以下scripts属性。

{
  "name": "my-app",
  "version": "1.0",
  "license": "UNLICENSED",
  "private": true,
  "workspaces": ["packages/*"],
  "devDependencies": {
    "typescript": "^4.2.3"
  },
  "scripts": {
    "app": "yarn workspace @my-app/app",
    "common": "yarn workspace @my-app/common",
    "server": "yarn workspace @my-app/server"
  }
}

您现在可以执行任何命令，就像您在子软件包中一样。例如，您可以输入来添加一些新的依赖项yarn server add express。这将server直接向程序包添加新的依赖项。

准备Fot Git 文件

如果计划使用Git作为版本控制工具，则强烈建议忽略生成的文件，例如二进制文件或日志。

为此，请.gitignore在项目的根目录下创建一个新文件，并将以下内容复制到该文件中。这将忽略本教程稍后将生成的某些文件，并避免提交大量不必要的数据。

# Logs
yarn-debug.log*
yarn-error.log*

# Binaries
node_modules/

# Builds
dist/
**/public/script.js

此时您的文件结构应如下所示：

my-app/
├─ packages/
├─ .gitignore
├─ package.json

在下一篇章中，我们将开始构建前端和后端应用程序。

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8