Nestjs使用Vite进行热重载

在nestjs的官方文档里有使用webpack进行热重载,但是并没有vite的示例。

虽然在GitHub上有使用vite的例子和vite-plugin-node这个库提供支持,但还是踩了一点坑的,例如ts的报错,这对于我这种不会配置tsconfig的简直是折磨,所以出个教程用于完整de流程。

nodejs 版本 >= 16

1、创建一个nestjs项目

ctrl + ~调出终端

bash 复制代码
# 没有pnpm或者nest脚手架的全局装一下,有的可以跳过
npm install -g pnpm @nestjs/cli
nest new xxx -p pnpm

2、安装项目依赖

bash 复制代码
pnpm install -D vite vite-plugin-node

3、新建vite.config.ts文件

ts 复制代码
// vite.config.ts
import { defineConfig } from 'vite'
import { VitePluginNode } from 'vite-plugin-node'

export default defineConfig({
  plugins: [
    ...VitePluginNode({
      adapter: 'nest',
      appPath: './src/main.ts',
      tsCompiler: 'swc'
    })
  ],
  optimizeDeps: {
    // Vite不能很好地处理可选依赖项,现在将它们标记为忽略
    exclude: [
      '@nestjs/microservices',
      '@nestjs/websockets',
      'cache-manager',
      'class-transformer',
      'class-validator',
      'fastify-swagger'
    ]
  }
})

4、修改main.ts导出

ts 复制代码
// main.ts
import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'

if (import.meta.env.PROD) {
  async function bootstrap() {
    const app = await NestFactory.create(AppModule)
    await app.listen(3000)
  }
  bootstrap()
}

export const viteNodeApp = NestFactory.create(AppModule)

这个时候我们发现import.meta.env.PROD报错

5、修改tsconfig.json

json 复制代码
{
  "compilerOptions": {
    "module": "ESNext",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ESNext",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "types": [
      "vite/client"
    ],
    "moduleResolution": "node"
  }
}

如果还有报错就重启一下ts服务器,在报错的.ts文件下按下ctrl + shift + p

输入restart ts server按下回车

6、修改package.json中的命令

json 复制代码
"scripts": {
    "dev": "vite",
    "build": "rimraf dist && vite build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "nest start",
    "start:dev": "nest start --watch",
    "start:debug": "nest start --debug --watch",
    "start:prod": "node dist/main",
    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:cov": "jest --coverage",
    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
    "test:e2e": "jest --config ./test/jest-e2e.json"
  },

7、安装swc并运行项目测试热重载

bash 复制代码
pnpm add -D @swc/core
pnpm dev

按住ctrl鼠标点击终端链接http://localhost:5173/打开项目这个时候你可以看到hello world!

新开一个命令窗口,保持项目运行

新窗口中输入nest g res cat

然后一直回车

然后在链接后面拼接cat http://localhost:5173/cat

如果出现 This action returns all cat那么证明热重载成功

本文作者是个菜坤,有问题及时反馈@

相关推荐
打小就很皮...2 分钟前
ShowCountCard 功能迭代:新增周月对比属性,完善数据可视化场景
前端·react.js·信息可视化
IT_陈寒12 分钟前
Redis性能翻倍的7个冷门技巧:从P5到P8都在偷偷用的优化策略!
前端·人工智能·后端
Moonbit23 分钟前
MoonBit Meetup 丨 手把手带你走进 AI 编程新世代
前端·后端·程序员
携欢24 分钟前
PortSwigger靶场之 CSRF where token is not tied to user session通关秘籍
前端·csrf
HHHHHY1 小时前
使用阿里lowcode,手搓一个Carousel 走马灯容器组件
前端·react.js
用户352120195601 小时前
React-router v7
前端
api_180079054601 小时前
异步数据采集实践:用 Python/Node.js 构建高并发淘宝商品 API 调用引擎
大数据·开发语言·数据库·数据挖掘·node.js
Mintopia1 小时前
⚡ AI 时代,全栈 Next.js 开发的激情在哪里?
前端·aigc·全栈
Hello123网站1 小时前
300多个Html5小游戏列表和下载地址
前端·html·html5
Stringzhua1 小时前
ElementUi【饿了么ui】
前端·ui·elementui