从零开始创建一个nodejs+ts+express+热加载的简易项目

为了搭建一个 nodejs + express + ts + 热加载 的一个简易项目，需要配置一些基础的文件来确保 ts 代码能被编译和正确的运行。下面是一个详细的配置例子，以供参考。

1. 安装 Node.js:

确保系统上已经安装了 Node.js。这一步省略，安装也很简单。

2. 初始化项目

创建一个新的项目目录并进入这个目录，然后使用 yarn 初始化一个新项目。

mkdir demo
cd demo
yarn init -y	#使用默认设置快速初始化

3. 安装依赖

安装 Express 和 TypeScript 作为项目依赖，并安装 @types/express 和 @types/node 作为开发依赖，这些类型定义将帮助你在 TypeScript 代码中获取自动补全和类型检查：

yarn add express typescript --save
yarn add @types/express @types/node --dev

4. 配置 TypeScript

创建一个名为 tsconfig.json 的文件，这个文件是 TypeScript 编译器的配置文件。可以使用 tsc --init 命令快速生成一个默认的配置文件, 并根据需要进行修改：

npx tsc --init

这会生成一个包含默认设置的 tsconfig.json 文件。你可以根据需要修改这些设置。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

在这个配置中，我们指定了输出目录为 dist ，源代码目录为 src ，并启用了严格类型检查。

5. 创建源代码目录和文件

在 src 目录下创建你的TypeScript文件。例如，你可以创建一个 app.ts 文件作为你的 Express 应用的入口点，并在其中编写你的 Express 路由和中间件。

mkdir src
echo. > src\app.ts

在 app.ts 中，你可以这样编写一个简单的 Express 应用：

// src/app.ts

import express from 'express';

const app = express();
const PORT = process.env.PORT || 3000;

app.get('/', (req, res) => {
  res.send('Hello, TypeScript and Express!');
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

6. 编译和运行应用

在你的 package.json 中添加一个脚本来编译和运行你的应用：

{
  "name": "demo",
  "version": "1.0.0",
  "main": "dist/app.js",
  "scripts": {
    "build": "tsc",
    "start": "node dist/app.js"
  },
  "dependencies": {
    "express": "^4.19.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.21",
    "@types/node": "^20.12.13",
    "typescript": "^5.4.5"
  }
}

7. 编译TypeScript代码

在命令行中运行 npm run build 命令来编译你的 TypeScript 代码。这将会根据 tsconfig.json 配置文件中的设置，将 src 目录下的 .ts 文件编译成 JavaScript 文件，并输出到 dist 目录。

npm run build

8. 运行编译后的应用

一旦 TypeScript 代码被编译成 JavaScript，你就可以使用 Node.js 来运行这个应用。在命令行中运行 npm start 命令来启动你的 Express 应用。

npm start

你应该会看到类似以下的输出，表示你的服务器正在运行：

Server is running on port 3000.

9. 验证应用

现在，你可以打开浏览器并访问 http://localhost:3000/ 来查看你的 Express 应用是否按预期工作。你应该能看到 "Hello, TypeScript and Express!" 这样的消息。

10. 设置开发服务器(可选)

为了在开发过程中自动重新编译并运行你的代码（即热加载），你可以使用 nodemon 这样的工具。首先，你需要安装 nodemon 作为开发依赖：

yarn add nodemon --dev

然后，在 package.json 中更新你的 scripts 部分，添加一个 dev 脚本来使用 nodemon 启动你的应用：

"scripts": {
  "build": "tsc",
  "start": "node dist/app.js",
  "dev": "nodemon --exec \"npx ts-node\" src/app.ts"
},

现在，你可以使用 npm run dev 命令来启动你的开发服务器。这将会使用 ts-node 来直接运行你的 TypeScript 代码，并且当文件发生更改时，nodemon 会自动重启你的应用。

注意：在上面的 dev 脚本中，我们使用了 ts-node 而不是编译后的 JavaScript 代码。这是为了在开发过程中提供更快的反馈循环，但请注意在生产环境中你应该始终使用编译后的 JavaScript 代码。

11. 其他配置和扩展(可选)

根据你的项目需求，你可能还需要配置其他工具或库，如 Webpack 进行更复杂的构建和打包，ESLint 进行代码质量检查，Prettier 进行代码格式化等。这些配置和扩展可以根据你的具体需求进行添加和调整。