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那么证明热重载成功

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

相关推荐
yddddddy1 小时前
css的基本知识
前端·css
昔人'1 小时前
css `lh`单位
前端·css
Nan_Shu_6143 小时前
Web前端面试题(2)
前端
知识分享小能手3 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队4 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光4 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql5204 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
Days20504 小时前
LeaferJS好用的 Canvas 引擎
前端·开源
小白菜学前端5 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿5 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js