2024 使用 TS 搭建 Node.js 服务器 - 快速教程

2f1165aa04bd677ec48882da51b0aa12.jpeg

这是一份 2024 年如何设置 Node.js 项目的快速教程。内容包括 TypeScript、实时重新加载和环境变量支持。

设置项目

确保您的 Node.js 版本 >= 20.6。

mkdir my-node-app
cd my-node-app/
git init
npm init -y
npm i -D typescript ts-node @types/node
npx tsc --init

接下来,打开 package.json 并添加以下内容:

{
  "engines": {
    "node": ">=20.6.0"
  },
  "name": "my-node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "tsc",
    "dev": "node --env-file=.env --watch -r ts-node/register src/index.ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Jason Lengstorf <jason@learnwithjason.dev>",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.11.17",
    "ts-node": "^10.9.2",
    "typescript": "^5.3.3"
  }
}

注意:

  • --watch 标志是在 Node v18.11.0 中添加的。

  • --env-file=config 标志是在 Node v20.6.0 中添加的。

添加环境变量

// .env
TEST_VALUE=hello

创建应用程序文件

创建 src/index.ts 并放入一些代码:

// src/index.ts
function test(): void {
  console.log(process.env.TEST_VALUE);
}

test();

启动 Node 服务器并测试实时重新加载

❯ npm run dev

> my-node-app@1.0.0 dev
> node --env-file=.env --watch -r ts-node/register src/index.ts

(node:29702) ExperimentalWarning: Watch mode is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
hello
Completed running 'src/index.ts'

src/index.ts 文件进行更改,服务器将自动重新启动,并在控制台中显示您的更改。

就是这样 - 现在您拥有一个使用尽可能少的依赖项、为 2024 年构建应用程序进行现代化处理的 Node 应用程序,同时具有 TypeScript 运行和实时重新加载环境变量。

参考 https://www.learnwithjason.dev/blog/modern-node-server-typescript-2024

- END -

16067ec1d1b8aec7950feb0687c96c24.gif

敬请关注「Nodejs技术栈」微信公众号,期望与志同道合的你一起打造优质 “Nodejs技术栈” 交流群,一起互相学习进步!可长按下方二维码添加【五月君】个人微信备注 “Node” 邀请入群。

3e8afc7b7be15e1e6d1c418fd0c8d33e.png

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,您需要先安装Node.js和React,并创建一个React项目。接下来,您可以按照以下步骤进行操作: 1. 在您的项目根目录下创建一个名为 `server` 的文件夹,并在其中创建一个名为 `data.json` 的文件,用于存储todo应用的数据。 2. 在 `server` 文件夹中创建一个 `server.js` 文件,用于启动后端服务器。在该文件中,您需要使用以下代码: ```javascript const express = require('express'); const app = express(); const cors = require('cors'); const fs = require('fs'); app.use(cors()); app.use(express.json()); const dataPath = './server/data.json'; app.get('/api/todos', (req, res) => { const data = JSON.parse(fs.readFileSync(dataPath)); res.json(data.todos); }); app.post('/api/todos', (req, res) => { const data = JSON.parse(fs.readFileSync(dataPath)); const newTodo = req.body; data.todos.push(newTodo); fs.writeFileSync(dataPath, JSON.stringify(data)); res.json(newTodo); }); const port = 3001; app.listen(port, () => { console.log(`Server listening at http://localhost:${port}`); }); ``` 该代码使用了 `express` 框架搭建了一个后端服务器,并在 `data.json` 文件中存储了todo应用的数据。其中,`GET /api/todos` 接口用于获取所有todo数据,`POST /api/todos` 接口用于新增一条todo数据。 3. 在项目根目录下,运行以下命令安装依赖: ``` npm install cors express fs ``` 4. 接下来,您需要在React项目中使用 `axios` 库来调用后端接口并获取todo数据。在您的React组件中,可以使用以下代码: ```javascript import React, { useState, useEffect } from 'react'; import axios from 'axios'; const TodoList = () => { const [todos, setTodos] = useState([]); useEffect(() => { axios.get('http://localhost:3001/api/todos') .then(res => setTodos(res.data)); }, []); return ( <ul> {todos.map(todo => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ); }; export default TodoList; ``` 该代码使用了 `axios` 库发起了一个GET请求来获取所有todo数据,并将数据存储到 `todos` 状态中。您可以在您的组件中使用 `todos` 状态来渲染您的todo列表。 5. 最后,您需要在您的React项目中使用 `webpack` 来编译您的静态资源。在您的项目根目录下,可以使用以下命令来安装 `webpack` 和 `webpack-cli`: ``` npm install webpack webpack-cli --save-dev ``` 6. 接下来,您需要在项目根目录下创建一个名为 `webpack.config.js` 的文件,并添加以下代码: ```javascript const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'server/static'), }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/preset-react'], }, }, }, { test: /\.ts(x?)$/, exclude: /node_modules/, use: { loader: 'ts-loader', }, }, { test: /\.css$/, use: ['style-loader', 'css-loader'], }, ], }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, }; ``` 该代码使用了 `webpack` 来编译您的React项目,并将静态资源编译到了 `server/static` 目录下。 7. 最后,您可以使用以下命令来启动您的React项目和后端服务器: ``` npm run start ``` 该命令会同时启动React项目和后端服务器,并在浏览器中打开您的todo应用。您可以在浏览器中访问 `http://localhost:3000` 来查看您的应用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值