npm 请在工作区中创建自己的node_modules,而不是使用monorepo

s5a0g9ez  于 2022-12-04  发布在  其他
关注(0)|答案(2)|浏览(363)

我有一个全栈Web应用程序的monorepo,它具有以下目录结构

.
├── client
│   ├── index.html
│   ├── package.json
│   ├── src
│   └── vite.config.ts
├── node_modules
├── package-lock.json
├── package.json
├── server
│   ├── package.json
│   └── src
├── tsconfig.json
└── tsconfig.node.json

但是,当我运行npm run dev -ws client时,vite会在client/中生成它自己的node_modules/

.
├── client
│   ├── index.html
│   ├── node_modules <--- this
│   │   └── .vite
│   │       └── deps_temp
│   │           └── package.json
│   ├── package.json
│   ├── src
│   └── vite.config.ts

我的理解是,使用npm工作空间的目的是避免在每个子项目中有多个node_modules/,而不是将所有依赖项安装在根node_modules/中。
我假设我没有正确配置的东西(我用npx create-vite来设置vite)。
npm run dev -ws client的输出

> @sargon-dashboard/client@0.0.0 dev
> vite client

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

  VITE v3.2.4  ready in 175 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

vite.config.ts的内容

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()]
})

root/package.json的内容

{
    "name": "app",
    "private": true,
    "workspaces": [
        "client",
        "server"
    ]
}

root/client/package.json的内容

{
  "name": "@app/client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }
}

root/server/package.json的内容

{
  "name": "@app/server",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
pgpifvop

pgpifvop1#

node_modules/.vite是默认的vite缓存目录,它看起来像是monorepo中的一个错误配置,因为你不再期望在包中有node_modules文件夹。
如果需要,可以配置其他路径:https://v2.vitejs.dev/config/#cachedir

8e2ybdfx

8e2ybdfx2#

看起来你在monorepo中正确地使用了npm工作区。然而,看起来Vite在客户端目录中创建了自己的node_modules目录。这并不是意外的行为,因为Vite使用本地开发服务器来服务于你的项目中的文件,并且它需要安装自己的依赖项来完成这一操作。
也可以通过在Vite config中使用base选项来配置Vite,使其使用monorepo根目录下的node_modules目录。可以在vite.config.ts文件中添加以下行来实现这一点:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '.',
  plugins: [react()]
})

这将告诉Vite使用monorepo根目录下的node_modules目录,而不是在客户端目录下创建一个新目录。
我希望这对你有帮助!如果你有任何其他问题,请告诉我。

相关问题