我有一个全栈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"
}
2条答案
按热度按时间pgpifvop1#
node_modules/.vite
是默认的vite缓存目录,它看起来像是monorepo中的一个错误配置,因为你不再期望在包中有node_modules文件夹。如果需要,可以配置其他路径:https://v2.vitejs.dev/config/#cachedir
8e2ybdfx2#
看起来你在monorepo中正确地使用了npm工作区。然而,看起来Vite在客户端目录中创建了自己的node_modules目录。这并不是意外的行为,因为Vite使用本地开发服务器来服务于你的项目中的文件,并且它需要安装自己的依赖项来完成这一操作。
也可以通过在Vite config中使用base选项来配置Vite,使其使用monorepo根目录下的node_modules目录。可以在vite.config.ts文件中添加以下行来实现这一点:
这将告诉Vite使用monorepo根目录下的node_modules目录,而不是在客户端目录下创建一个新目录。
我希望这对你有帮助!如果你有任何其他问题,请告诉我。