介紹

在使用nest創(chuàng)建項(xiàng)目時(shí),默認(rèn)使用webpack進(jìn)行打包,有時(shí)候啟動項(xiàng)目需要1-2分鐘。所以希望采用vite進(jìn)行快速啟動項(xiàng)目進(jìn)行開發(fā)。

本文主要使用NestJs、Vite和swc進(jìn)行配置。文章實(shí)操較多，概念性的東西可訪問對應(yīng)的官方文檔進(jìn)行了解。tips: 個(gè)人認(rèn)為概念性的東西,在文章中指出。對熟悉的人來說直接就實(shí)操，節(jié)省時(shí)間。感興趣的小伙伴探索性去了解，提升學(xué)習(xí)樂趣

概念

1. 什么是NestJS?

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

中文地址: NestJS 簡介 | NestJS 中文文檔 | NestJS 中文網(wǎng) (bootcss.com)

個(gè)人理解: NodeJS的Spring Boot. 結(jié)合了面向?qū)ο?函數(shù)式編程和依賴注入的理念,使用NodeJS 搭建后端應(yīng)用程序。
聯(lián)想: express、egg、Spring Boot

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

實(shí)操

創(chuàng)建項(xiàng)目

參考NestJS 官網(wǎng)

執(zhí)行命令:

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

安裝完成之后目錄結(jié)構(gòu)如下:

在項(xiàng)目的根目錄下運(yùn)行項(xiàng)目

在瀏覽器上輸入localhost:3000可以看到項(xiàng)目的輸出: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',

      // 項(xiàng)目入口文件
      appPath: './src/main',

      // 在項(xiàng)目入口文件中導(dǎo)出的名字
      exportName: 'appServer',

      // 編譯方式: esbuild 和 swc,
      // 默認(rèn) 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);

問題總結(jié)

1. 無法識別import.meta
   

   解決方案：修改tsconfig.json

2. 無法識別env
   

   解決方案：可參考vite官網(wǎng)添加env.d.ts

   /// <reference types="vite/client" />
   interface ImportMetaEnv {
     readonly VITE_APP_TITLE: string;
     // more env variables...
   }
   interface ImportMeta {
     readonly env: ImportMetaEnv;
   }
   
   

總結(jié)

以上是生活随笔為你收集整理的NestJs系列之使用Vite搭建项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。