NestJs系列之使用Vite搭建项目

介绍

在使用nest创建项目时,默认使用webpack进行打包,有时候启动项目需要1-2分钟。所以希望采用vite进行快速启动项目进行开发。

本文主要使用NestJs、Vite和swc进行配置。文章实操较多,概念性的东西可访问对应的官方文档进行了解。tips: 个人认为概念性的东西,在文章中指出。对熟悉的人来说直接就实操,节省时间。感兴趣的小伙伴探索性去了解,提升学习乐趣

概念

  1. 什么是NestJS?

官方地址: NestJS - A progressive Node.js framework

中文地址: NestJS 简介 | NestJS 中文文档 | NestJS 中文网 (bootcss.com)

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

联想: express、egg、Spring Boot

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

实操

创建项目

参考NestJS 官网

执行命令:

复制代码
$ npm i -g @nestjs/cli
$ nest new project-name

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

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

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

安装Vite

复制代码
pnpm add vite vite-plugin-node -D

配置Vite

参考VitePluginNode配置

复制代码
export default defineConfig({
  server: {
    port: 3000,
  },
  plugins: [
    ...VitePluginNode({
      // NodeJs 原生请求适配器
      // 支持'express', 'nest', 'koa' 和 'fastify',
      adapter: 'nest',

      // 项目入口文件
      appPath: './src/main',

      // 在项目入口文件中导出的名字
      exportName: 'appServer',

      // 编译方式: esbuild 和 swc,
      // 默认 esbuild. 但esbuild 不支持 'emitDecoratorMetadata'
      // 使用swc需要安装 `@swc/core`
      tsCompiler: 'swc',
    }),
  ],
  optimizeDeps: {
    exclude: [
        '@nestjs/microservices',
        '@nestjs/websockets',
        'cache-manager', 
        'class-transformer',
        'class-validator', 
        'fastify-swagger'
    ],
  },
});

修改入口文件

复制代码
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 appServer = NestFactory.create(AppModule);

问题总结

  1. 无法识别import.meta

    解决方案:修改tsconfig.json

  2. 无法识别env

    解决方案:可参考vite官网添加env.d.ts

    复制代码
    /// <reference types="vite/client" />
    interface ImportMetaEnv {
      readonly VITE_APP_TITLE: string;
      // more env variables...
    }
    interface ImportMeta {
      readonly env: ImportMetaEnv;
    }
相关推荐
百罹鸟9 小时前
nestjs 从零开始 一步一步实践
前端·node.js·nestjs
没烦恼30115 小时前
Vite 打包目录结构自定义配置指南
前端·vite
FogLetter1 天前
Vite vs Webpack:前端构建工具的双雄对决
前端·面试·vite
江湖人称小鱼哥2 天前
主流技术栈 NestJS、TypeScript、Node.js版本使用统计
typescript·node.js·nestjs
前端赵哈哈3 天前
Vite 图片压缩的 4 种有效方法
前端·vue.js·vite
前端赵哈哈4 天前
解决 Vue+TS 项目打包(vue-tsc -b && vite build)未使用变量提示 / 报错问题
前端·vue.js·vite
萌萌哒草头将军4 天前
🚀🚀🚀 告别复制粘贴,这个高效的 Vite 插件让我摸鱼🐟时间更充足了!
前端·vite·trae
Noxi_lumors4 天前
VITE BALABALA require balabla not supported
前端·vite
可爱生存报告4 天前
vue3 vite quill-image-resize-module打包报错 Cannot set properties of undefined
前端·vite
xiaohe06015 天前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(二)
vite·rollup.js