NestJS、Vite 和 esbuild 入门

酆乐湛

2023-12-01

在本文中，我们将学习 NestJS、Vite 和 esbuild；他们如何一起工作；以及如何配置 NestJS 应用程序以使用其他工具作为依赖项。在此过程中，我们将学习如何在现实生活场景中使用它们、它们的主要功能和用例。

跳跃前进：

什么是 NestJS？
什么是维特？
什么是esbuild？
安装和配置 NestJS 应用
探索 NestJS 样板
使用 NestJS 安装 Vite 和 esbuild

什么是 NestJS？

NestJS 是一个 Node.js 框架，用于构建高效且可扩展的企业服务器端/后端应用程序。根据文档，它支持 JavaScript 和 TypeScript 的所有最新 ECMAScript 版本。

NestJS 结合了众所周知的 OOP、函数式编程和函数式反应式编程的编程概念和哲学，以解决后端应用程序设计中的架构挑战，这些应用程序可扩展、可维护、易于测试且不紧密耦合在一起。

尽管 NestJS 是独立于平台的，并且可以与任何 Node.js 库一起使用，如果为其编写绑定，NestJS 默认使用 Express 作为依赖项，也可以配置为使用 Fastify。通过暴露的 API 和其他第三方模块轻松配置框架，使开发人员可以非常轻松地根据具体情况自定义框架。

什么是维特？

Vite 的构建工具是一个具有很多功能，其中主要是近乎即时的开发服务器启动时间。它利用在浏览器中引入原生 ES 模块和用编译为原生代码的语言编写的工具来解决与以前的构建工具（webpack、Parcel 等）有关的性能问题。

Vite 的工作原理是首先将应用程序中的模块分为两类，依赖项和源代码，因为依赖项在开发过程中很少发生变化。预先捆绑 Vite 在后台使用esbuild 了这些依赖项。对于可能需要转换的源代码（CSS、JSX 等），Vite 通过原生 ESM 将它们提供给浏览器。

当浏览器发出对源代码的请求时，Vite 会根据需要转换和加载它们，并且浏览器可以使用基于路由的代码拆分和条件动态导入来捆绑所需的代码，使其成为一个非常快速的过程。

什么是esbuild？

esbuild 是一个用 Go 编写的超快的 JavaScript 打包器，它利用 Go 的并行性和将源代码转换为机器代码的能力。除其他外，其功能包括：

巨大的插件支持
一个缩小器
TypeScript 和 JSX 支持
ES2015 和 CommonJS 模块都支持
摇树能力

安装和配置 NestJS 应用

现在我们已经从高层次上了解了 NestJS、Vite 和 esbuild，让我们继续通过配置 NestJS 应用程序以使用 Vite 和 esbuild 作为依赖项来了解它们如何协同工作。在此过程中，我们将学习如何在现实生活场景中使用它们、它们的主要功能和主要用例。

超过 20 万开发人员使用 LogRocket 来创造更好的数字体验了解更多 →

要开始使用 NestJS，请继续安装 CLI，它会引导启动代码。对于那些不熟悉 NestJS 的人来说，这是一个特别好的选择。

另一种选择是克隆初始存储库从 GitHub 。请注意，要安装启动项目的 JavaScript 风格，我们可以克隆这个 repo ，但你需要 Babel 来编译 vanilla JavaScript）。

出于我们的目的，我们将继续安装 CLI。运行以下命令：

npm i -g @nestjs/cli

After we are done installing the CLI, we can go ahead to create a new Nest project:

nest new nest_vite_esbuild_demo

运行此命令的输出如下所示：

nest new nest_vite_esbuild_demo                                                                                 took 24s
  We will scaffold your app in a few seconds..

CREATE nest_vite_esbuild_demo/.eslintrc.js (665 bytes)
CREATE nest_vite_esbuild_demo/.prettierrc (51 bytes)
CREATE nest_vite_esbuild_demo/README.md (3340 bytes)
CREATE nest_vite_esbuild_demo/nest-cli.json (118 bytes)
CREATE nest_vite_esbuild_demo/package.json (2007 bytes)
CREATE nest_vite_esbuild_demo/tsconfig.build.json (97 bytes)
CREATE nest_vite_esbuild_demo/tsconfig.json (546 bytes)
CREATE nest_vite_esbuild_demo/src/app.controller.spec.ts (617 bytes)
CREATE nest_vite_esbuild_demo/src/app.controller.ts (274 bytes)
CREATE nest_vite_esbuild_demo/src/app.module.ts (249 bytes)
CREATE nest_vite_esbuild_demo/src/app.service.ts (142 bytes)
CREATE nest_vite_esbuild_demo/src/main.ts (208 bytes)
CREATE nest_vite_esbuild_demo/test/app.e2e-spec.ts (630 bytes)
CREATE nest_vite_esbuild_demo/test/jest-e2e.json (183 bytes)

? Which package manager would you   to use? (Use arrow keys)
❯ npm 
  yarn 
  pnpm

确保您的机器上安装了最新的 Node.js 版本（不支持 v13 除外）。

从上面我们可以看出，项目目录已经填充了 Nest 的核心文件、依赖项和基础模块。按照步骤并选择您选择的包管理器。在这篇文章中，我们使用的是 npm。安装结束时的文件夹结构如下图所示。

搭建我们的 NestJS 应用程序的文件夹结构

接下来，我们可以通过运行以下命令导航到该文件夹。

来自 LogRocket 的更多精彩文章：

不要错过 The Replay 来自 LogRocket 的精选时事通讯
了解 LogRocket 的 Galileo 如何消除噪音以主动解决应用程序中的问题
使用 React 的 useEffect 优化应用程序的性能
之间切换在多个 Node 版本
了解如何使用 AnimXYZ 为您的 React 应用程序制作动画
探索 Tauri ，一个用于构建二进制文件的新框架
比较 NestJS 与 Express.js

cd nest_vite_esbuild_demo

然后，继续并启动项目：

npm run start

运行该命令的输出如下所示。

npm run start                  

> nest_vite_esbuild_demo@0.0.1 start
> nest start

[Nest] 33031  - 08/08/2022, 3:22:16 AM     LOG [NestFactory] Starting Nest application...
[Nest] 33031  - 08/08/2022, 3:22:16 AM     LOG [InstanceLoader] AppModule dependencies initialized +48ms
[Nest] 33031  - 08/08/2022, 3:22:16 AM     LOG [RoutesResolver] AppController {/}: +8ms
[Nest] 33031  - 08/08/2022, 3:22:16 AM     LOG [RouterExplorer] Mapped {/, GET} route +3ms
[Nest] 33031  - 08/08/2022, 3:22:16 AM     LOG [NestApplication] Nest application successfully started +8ms

作为上述的替代方案，我们还可以在开发模式下启动我们的应用程序，以观察文件更改、重新编译构建并通过运行以下命令重新加载开发服务器：

npm run start:dev

然后，导航到 http://localhost:3000/在浏览器中。此外，我们还可以继续手动安装 NestJS 的核心依赖项。在此设置中，我们可以根据需要设置项目结构，只需运行以下命令。

npm i --save @nestjs/core @nestjs/common reflect-metadata

探索 NestJS 样板

当我们导航到 src在我们的项目文件夹中的目录中，我们可以看到为我们创建的默认文件。我们有：

这 app.controller.ts文件，它代表我们的处理程序，只有一个路由
这 app.service.ts文件，它处理与方法或实用程序功能相关的任何内容，以保持控制器苗条
这 app.module文件，它处理我们应用程序的基本模块（一种构建应用程序组件的方式）
这 app.controller.spec.ts文件，它处理测试我们的控制器逻辑
这 main.ts文件，它是我们应用程序的入口点，并使用核心创建一个 Nest 应用程序实例 NestFactory功能

我们的默认文件 src目录

NestJS 鼓励开发人员尽可能地保持他们的应用程序架构模块化，源目录中的每个目录都代表一个模块。每个 Nest 应用程序必须至少有一个模块，一个根模块，它是构建应用程序图的起点。

例如，我们可以运行以下命令来创建一个新模块：

nest g module product_demo

我们的新产品演示模块在 src目录

从上面可以看出，我们创建了一个 product_demo模块。然后我们可以继续创建其他需要的文件—— controller和 services— 并且还导入 product_demo模块到应用程序基础模块中。

有关 NestJS 基础和特性的更多信息，我们可以参考文档，包括测试、提供程序、生命周期事件、装饰器、中间件、模块等，以掌握框架。接下来，让我们继续在我们的 NestJS 应用程序上设置 Vite 和 esbuild。

MyACG小说动漫App，超全资源聚合搜索，所有的资源都是免费的！

使用 NestJS 安装 Vite 和 esbuild

Vite 是基于插件的，并且还带有一个经过良好优化的快速构建过程，可以大大提高您的整体开发人员生产力和体验。它还支持开箱即用的 TypeScript。

现在，让我们将 Vite 集成到我们的 NestJS 后端应用程序中。我们将通过插件安装 Vite，该插件运行带有热模块更换的 Node 开发服务器。

运行以下命令作为开发依赖项。

npm install vite vite-plugin-node -D

接下来，在我们项目目录的根目录中，我们可以创建 vite.config.ts文件，它配置我们的项目以使用插件。让我们在下面查看该文件的内容。

import { defineConfig } from 'vite';
import { VitePluginNode } from 'vite-plugin-node';
export default defineConfig({
  // ...vite configures
  server: {
    // vite server configs, for details see \[vite doc\](https://vitejs.dev/config/#server-host)
    port: 3000
  },
  plugins: [
    ...VitePluginNode({
      // Nodejs native Request adapter
      // currently this plugin support 'express', 'nest', 'koa' and 'fastify' out of box,
      // you can also pass a function if you are using other frameworks, see Custom Adapter section
      adapter: 'nest',
      // tell the plugin where is your project entry
      appPath: './src/main.ts',
      // Optional, default: 'viteNodeApp'
      // the name of named export of you app from the appPath file
      exportName: 'viteNodeApp',
      // Optional, default: 'esbuild'
      // The TypeScript compiler you want to use
      // by default this plugin is using vite default ts compiler which is esbuild
      // 'swc' compiler is supported to use as well for frameworks
      // like Nestjs (esbuild dont support 'emitDecoratorMetadata' yet)
      // you need to INSTALL `@swc/core` as dev dependency if you want to use swc
      tsCompiler: 'esbuild',
    })
  ],
  optimizeDeps: {
    // Vite does not work well with optionnal dependencies,
    // mark them as ignored for now
    exclude: [
        '@nestjs/microservices',
        '@nestjs/websockets',
        'cache-manager',
        'class-transformer',
        'class-validator',
        'fastify-swagger',
      ],
  },
});

接下来，我们需要更新我们的应用服务器文件的入口点（ main.ts) 导出名为 viteNodeApp（在 Vite 配置中 exportName上面的字段）或我们在上面的 Vite 配置文件中配置的任何其他名称。见下文。

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);

接下来，在我们的 package.json文件，我们可以继续添加一个 npm 脚本来使用常规运行开发服务器 npm run dev命令：

"scripts": {
  "dev": "vite"
}

正如我们之前提到的，Vite 带有一个开发服务器，它通过原生 ESM 为我们的源文件提供服务。当我们使用 Vite 开发服务器运行我们的应用程序时，使用 npm run dev完成整个设置后的命令，我们将看到下面的输出。

运行后的输出 npm run dev命令

为确保一切仍按预期运行，请使用 npm run test命令，我们可以看到下面的输出。

运行后的输出 npm run test命令

该插件还使用 Vite 的服务器端渲染模式来构建我们的应用程序。为了利用这个特性，我们可以继续添加一个构建脚本到我们的 package.json文件（使用 Vite 而不是 Nest 构建我们的应用程序）：

"scripts": {
  "build": "vite build"
},

这 vite build捆绑在一起，命令将我们的代码与Rollup 并为我们的生产环境生成高度优化的资产。当我们使用 Vite 构建我们的应用程序时，运行 npm run build整个设置完成后的命令，我们可以看到下面的输出。

运行后的输出 npm run build命令

如前所述，Vite 在底层使用 esbuild 将 TypeScript 转换为 JavaScript。这是一个非常快速的编译过程——它甚至可以比常规的 TypeScript 编译器快 20 倍，并且 HMR 更新可以在 50 毫秒内反映在浏览器中。

)的优点之一使用 Vite 插件 ( vite-plugin-node 是我们可以选择使用 esbuild 或 swc 来编译我们的 TypeScript 文件，尽管我们在这篇文章中只使用了 esbuild。

结论

在这篇文章中，我们学习了如何使用 NestJS、Vite 和 esbuild。正如我们所看到的，NestJS 有一种有趣且相当新的方法来构建 Node.js 应用程序，其理念围绕 OOP、FP 和 FRP。从长远来看，这些改进极大地提高了开发人员的时间和生产力，因为我们不必为如何设计我们的模块和组件而烦恼。 NestJS 为我们解决了这个问题，并提出了一个每个文件夹一个模块的模式。我们还可以使用 TypeScript 的强大功能来编写我们的后端代码。

另一方面，Vite 在构建工具领域处于一个全新的水平。它正值 NodeJS 生态系统中流行的基于 JS 的捆绑器和构建工具需要提高性能的时候。 Vite 使用与 webpack 和 Parcel 完全不同的方法将我们的代码编译为原生代码。正如我们所了解的，它使用浏览器和本机 ESM 进行捆绑。

总之，我们结合了这些很棒的技术来构建一个简单的样板后端，可以作为您下一个 NestJS 项目的起点。

LogRocket ：全面了解您的网络和移动应用程序

LogRocket 是一个前端应用程序监控解决方案，可让您重现问题，就好像它们发生在您自己的浏览器中一样。无需猜测错误发生的原因，或要求用户提供屏幕截图和日志转储，LogRocket 可让您重播会话以快速了解问题所在。无论框架如何，它都可以完美地与任何应用程序配合使用，并且具有用于记录来自 Redux、Vuex 和 @ngrx/store 的附加上下文的插件。

除了记录 Redux 操作和状态之外，LogRocket 还记录控制台日志、JavaScript 错误、堆栈跟踪、带有标头 + 正文的网络请求/响应、浏览器元数据和自定义日志。它还检测 DOM 以记录页面上的 HTML 和 CSS，即使是最复杂的单页和移动应用程序也能重新创建像素完美的视频。