NestJs和Vite使用monorepo管理项目中,需要使用共享的文件夹步骤

NestJsVite使用monorepo管理项目中,需要使用共享的文件夹步骤

在这里插入图片描述

1 首先需要将nest-cli打包的功能通过webpack接管

nest-cli.json文件内容

{
  "$schema": "https://json.schemastore.org/nest-cli",
  "collection": "@nestjs/schematics",
  "sourceRoot": "src",
  "compilerOptions": {
    "webpack": true,
    "deleteOutDir": true,
    "tsConfigPath": "./tsconfig.build.json"
  }
}

根目录创建webpack.config.js文件. 使用nest-cli创建项目时, 已经安装了webpack的基本模块,因此可以直接使用
在这里插入图片描述
文件内容, 就按照下面的内容进行修改即可

const path = require("path")
const webpack = require("webpack")
const CopyPlugin = require("copy-webpack-plugin")

const sharedDirPath = path.resolve(__dirname, "../shared")
module.exports = {
  entry: "./src/main.ts",
  watch: true,
  target: "node",
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: "ts-loader",
        exclude: /node_modules/
      }
    ]
  },
  mode: "development",
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "@shared": sharedDirPath
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new CopyPlugin({
      patterns: [
        {
          from: sharedDirPath,
          to: "shared"
        }
      ]
    })
  ],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "main.js"
  }
}

注意copy-webpack-plugin的版本需要指定, 这里webpack的版本是5.73.0安装copy-webpack-plugin@9.1.0即可
pnpm add copy-webpack-plugin@9.1.0 -D, 不然会出现奇奇怪怪的问题

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一套目前来说最好的nestjs实战教程,提供QQ长期问答服务. 本人从 08 年到 18 年一直从事于 PHP 的开发。从 18 年开始转向 Typescript+React+Nestjs 的技术栈。目前来说 React 应该是一个非常好用的前端框架,生态非常完善,并且十分灵活简单。Nestjs 则是 Node.js 唯一且无敌存在的后端 web 框架。因为我个人从事这套技术栈开发已经 4 年多,所以颇有心得,做了这套 React18 视频教程和 Nestjs 实战视频教程。现在视频教程也是刚刚开始做了一部分,还在持续更新。使用 TS 全栈开发可以基本涵盖各种平台的方方面面,比如开发桌面应用的 Electron, 开发小程序的 Taro, 开发 Spa 后台的 React,开发 SSR 网站的 next.js,开发移动应用的 React Native, 开发 CLI 的 Yargs, 以及开发后端的 Nestjs。基本学会一套,全面够用,再加上 Monorepo 组织结构,一个仓库所有平台都可以搞定。 包含以下知识点 - 掌握Nestjs框架的依赖注入,模块,提供者,生命周期等概念- 掌握DTO数据验证,响应序列化,异常过滤器等常用功能- 学会编写一些常用的class-validator验证约束- 熟练掌握Typeorm以及Nestjs与Typeorm结合开发- 学会整合Swagger输出Open API文档- 掌握TS装饰器以及反射元数据的定义和使用- 编写一些数据库相关的数据验证约束(比如树形表的同级别某字段唯一验证等)- 学会通过继承并魔改Nestjs源码编写自定义的全局验证器- 可以编写自定义的配置系统以及核心功能包- 学会自定义的代码组织方式(比如教程我把默认的Nestjs应用改成Util+PluginModule模式)- 掌握编写一些常用的Util仓库(比如数据库,Redis,Restful)- 利用Yargs结合魔改后的框架可以编写一些自定义CLI命令(比如数据迁移,数据填充等)- 掌握如何利用阿里云/腾讯云推送邮件和短信- 掌握使用消息列队(MQ)的方式异步推送邮件和短信- 掌握守卫原理以及编写一些用户验证的守卫- 编写一个完善的用户系统(JWT认证,短信/邮件登录,短信/邮件注册,找回密码,绑定手机和邮箱等)- 熟练地通过编写装饰器去实现一些常用的功能- 通过SSE,WebSockets实现用户的上线,下线以及消息实时推送,消息广播等- 学会使用云存储来上传文件- 学会大文件断点雪川- 实现RBAC的权限系统- 理解请求范围概念以及性能方便的考量- 自己构建配置系统,实现配置验证以及通过YAML或数据库来进行动态配置- 通过适用Vscode进行Debug以及编写Jest测试来提升开发效率与程序的可用性- 学会使用Node来编写自定义的CLI命令- 利用NestCURD进行快速开发- 学会Graphql替代Restful写API- 使用Mongodb替代关系型数据库- 掌握一些常用的打包工具,比如通过ncc打包成单文件,通过pack打包成二进制等- 学会一些常用的部署方式,比如通过nginx+pm2反向代理部署,devops自动化CI,CD等- 学会使用pnpm workspaces来使用monreopo组织代码
以下是使用Vite项目和Tailwind CSS的详细步骤和过程: 1. 创建新项目 首先,你需要创建一个新的Vite项目。打开终端并运行以下命令: ``` npm init vite-app my-project ``` 这将创建一个名为“my-project”的新项目,并使用默认设置进行配置。它还将安装所有必要的依赖项。 2. 安装 Tailwind CSS 安装Tailwind CSS和相关的依赖项。在终端运行以下命令: ``` npm install tailwindcss postcss autoprefixer ``` 3. 创建配置文件 在项目的根目录创建一个名为“postcss.config.js”的新文件,并将以下内容添加到文件: ``` module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ], } ``` 这将告诉PostCSS使用Tailwind CSS和自动添加前缀的插件。 4. 创建样式文件 在项目的根目录创建一个名为“styles.css”的新文件,并添加以下内容: ``` @tailwind base; @tailwind components; @tailwind utilities; ``` 这将告诉Tailwind CSS使用默认的基础样式、组件和实用程序。 5. 导入样式文件 在项目的“src”文件夹创建一个名为“main.js”的新文件,并在其导入样式文件: ``` import './styles.css' ``` 这将确保样式文件被正确加载和编译。 6. 运行项目 现在可以运行项目并查看结果。在终端运行以下命令: ``` npm run dev ``` 这将启动开发服务器,并在浏览器打开项目。现在,你应该能够看到使用Tailwind CSS的样式已经应用到你的项目了。 希望这个步骤和过程能够帮助你开始使用Vite项目和Tailwind CSS。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值