NestJs系列之使用Vite搭建項目

来源:https://www.cnblogs.com/kingkangstudy/archive/2023/12/12/17896423.html
-Advertisement-
Play Games

介紹 在使用nest創建項目時,預設使用webpack進行打包,有時候啟動項目需要1-2分鐘。所以希望採用vite進行快速啟動項目進行開發。 本文主要使用NestJs、Vite和swc進行配置。文章實操較多,概念性的東西可訪問對應的官方文檔進行瞭解。tips: 個人認為概念性的東西,在文章中指出。對 ...


介紹

在使用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
    無法識別import.meta錯誤

解決方案:修改tsconfig.json

{
 "compilerOptions": {
   "module": "ESNext",
   "declaration": true,
   "moduleResolution": "Node",
   "removeComments": true,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "allowSyntheticDefaultImports": true,
   "target": "ES2021",
   "sourceMap": true,
   "outDir": "./dist",
   "baseUrl": "./",
   "incremental": true,
   "skipLibCheck": true,
   "strictNullChecks": true,
   "noImplicitAny": true,
   "strictBindCallApply": true,
   "forceConsistentCasingInFileNames": true,
   "noFallthroughCasesInSwitch": true,
   "types": [
     "vite/client"
   ]
 },
}

本文原創作者:古道瘦西風,轉載請註明原文鏈接:https://www.cnblogs.com/kingkangstudy/p/17896423.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、介紹 單庫瓶頸:如果在項目中使用的都是單MySQL伺服器,則會隨著互聯網及移動互聯網的發展,應用系統的數據量也是成指數式增長,若採用單資料庫進行存儲,存在一下性能瓶頸: IO瓶頸:熱點數據太多,資料庫緩存不足,產生大量磁碟IO,效率低下,請求數據太多,帶寬不夠,網路IO瓶頸。 CPU瓶頸:排序、 ...
  • 1. Performance Schema Lock Tables MySQL安裝以後,我們會看到有這麼兩個資料庫:information_schema 和 performance_schema ,它們對於排查問題是非常有用的。 Performance Schema 是一種存儲引擎,預設情況下,它是 ...
  • 問題 最近有好幾個朋友問,如何將 performance_schema.events_statements_xxx 中的 TIMER 欄位(主要是TIMER_START和TIMER_END)轉換為日期時間。 因為 TIMER 欄位的單位是皮秒(picosecond),所以很多童鞋會嘗試直接轉換,但轉 ...
  • 關聯發散是開發常用的獲取特定彙總數據的方法,但是使用這類方法意味著承擔數據爆炸的風險。本篇通過一個典型案例,給出了“求所有值中大於本行值的最小值”的一個調優方案。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 Echarts繪製氣泡圖 氣泡圖是一種用於可視化三維數據的圖表類型,其中兩個變數用於確定數據點在平面上的位置,另一個變數用於確定氣泡的大小。Echarts是一款基於JavaScript的數據可視化庫,它提供了豐富的圖表類型,包括靈活多變的 ...
  • 人在身處逆境時,適應環境的能力實在驚人。人可以忍受不幸,也可以戰勝不幸,因為人有著驚人的潛力,只要立志發揮它,就一定能渡過難關。 Hooks 是 React 16.8 的新增特性。它可以讓你在不編寫 class 組件的情況下使用 state 以及其他的 React 特性。 React Hooks 表 ...
  • 本文並不是介紹如何將一個網頁配置成離線應用並支持安裝下載的。研究PWA的目的僅僅是為了保證用戶的資源可以直接從本地載入,來忽略全國或者全球網路質量對頁面載入速度造成影響。當然,如果頁面上所需的資源,除了資源文件外並不需要任何的網路請求,那它除了不支持**安裝到桌面**,已經算是一個離線應用了。 ...
  • static:靜態定位(預設)。依據文檔流定位。 relative:相對定位。以自身為基準,設置坐標(left、top、right、bottom),不脫離文檔流。 absolute:絕對定位。以父元素為基準,設置坐標(left、top、right、bottom),脫離文檔流。 fixed:固定定位。... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...