NestJs系列之使用Vite搭建项目

小七哥说事

介绍

在使用nest创建项目时,默认使用webpack进行打包,有时候启动项目需要1-2分钟。所以希望采用vite进行快速启动项目进行开发。
本文主要使用NestJs、Vite和swc进行配置。文章实操较多，概念性的东西可访问对应的官方文档进行了解。tips: 个人认为概念性的东西,在文章中指出。对熟悉的人来说直接就实操，节省时间。感兴趣的小伙伴探索性去了解，提升学习乐趣
概念

• 什么是NestJS?
  

官方地址: NestJS - A progressive Node.js framework
中文地址: NestJS 简介 | NestJS 中文文档 | NestJS 中文网 (bootcss.com)

个人理解: NodeJS的Spring Boot. 结合了面向对象,函数式编程和依赖注入的理念,使用NodeJS 搭建后端应用程序。
联想: express、egg、Spring Boot

• 什么是Vite?
  官方地址: Vite | Next Generation Frontend Tooling (vitejs.dev)
  中文地址: Vite | 下一代的前端工具链 (vitejs.dev)
  
• 什么是swc?
  官方地址:Rust-based platform for the Web – SWC
  

实操

创建项目

参考NestJS 官网
执行命令:

1. $ npm i -g @nestjs/cli
2. $ nest new project-name

复制代码

安装完成之后目录结构如下:

在项目的根目录下运行项目

在浏览器上输入localhost:3000可以看到项目的输出:Hello World
安装Vite

1. pnpm add vite vite-plugin-node -D

复制代码

配置Vite

参考VitePluginNode配置

1. export default defineConfig({
2.   server: {
3.     port: 3000,
4.   },
5.   plugins: [
6.     ...VitePluginNode({
7.       // NodeJs 原生请求适配器
8.       // 支持'express', 'nest', 'koa' 和 'fastify',
9.       adapter: 'nest',
11.       // 项目入口文件
12.       appPath: './src/main',
14.       // 在项目入口文件中导出的名字
15.       exportName: 'appServer',
17.       // 编译方式: esbuild 和 swc,
18.       // 默认 esbuild. 但esbuild 不支持 'emitDecoratorMetadata'
19.       // 使用swc需要安装 `@swc/core`
20.       tsCompiler: 'swc',
21.     }),
22.   ],
23.   optimizeDeps: {
24.     exclude: [
25.         '@nestjs/microservices',
26.         '@nestjs/websockets',
27.         'cache-manager',
28.         'class-transformer',
29.         'class-validator',
30.         'fastify-swagger'
31.     ],
32.   },
33. });

复制代码

修改入口文件

1. import { NestFactory } from '@nestjs/core';
2. import { AppModule } from './app.module';
4. if (import.meta.env.PROD) {
5.   async function bootstrap() {
6.     const app = await NestFactory.create(AppModule);
7.     await app.listen(3000);
8.   }
9.   bootstrap();
10. }
11. export const appServer = NestFactory.create(AppModule);

复制代码

问题总结

• 无法识别import.meta
  
  
  解决方案：修改tsconfig.json
  

  
  

  
  
• 无法识别env
  
  
  解决方案：可参考vite官网添加env.d.ts
  1. /// <reference types="vite/client" />
  2. interface ImportMetaEnv {
  3.   readonly VITE_APP_TITLE: string;
  4.   // more env variables...
  5. }
  6. interface ImportMeta {
  7.   readonly env: ImportMetaEnv;
  8. }

  复制代码

来源:https://www.cnblogs.com/kingkangstudy/p/17896423.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！