Vite Monorepo项目中导入和使用Common包静态JS文件
在Vite Monorepo项目中，正确导入和使用common包里的静态JS文件需要理解Vite的依赖解析机制和Monorepo的工作方式。以下是详细的解决方案。
项目结构示例
假设你的Monorepo结构如下：
monorepo/ ├── packages/ │ ├── common/ │ │ ├── src/ │ │ │ └── utils.js │ │ ├── package.json │ │ └── vite.config.js │ └── app/ │ ├── src/ │ │ └── main.js │ ├── package.json │ └── vite.config.js ├── package.json └── vite.config.js
方法一：将Common包配置为依赖
1. 在App包的package.json中添加依赖
{
"name": "app",
"version": "1.0.0",
"dependencies": {
"common": "*"
}
}2. 在Common包的package.json中配置入口
{
"name": "common",
"version": "1.0.0",
"main": "./dist/index.js",
"module": "./dist/index.esm.js",
"types": "./dist/index.d.ts",
"files": [
"dist"
]
}3. 构建Common包
在Common包中创建vite.config.js：
import { defineConfig } from 'vite';
export default defineConfig({
build: {
lib: {
entry: './src/index.js',
name: 'Common',
fileName: (format) => `index.${format}.js`
},
rollupOptions: {
external: [],
output: {
globals: {}
}
}
}
});然后在Common包的package.json中添加构建脚本：
{
"scripts": {
"build": "vite build"
}
}4. 在App中使用Common包
// 在app/src/main.js中
import { someFunction } from 'common';
someFunction();方法二：直接导入静态JS文件
1. 将静态JS文件放在public目录
在Common包中创建public目录并放置静态JS文件：
packages/common/public/utils.js
2. 在Vite配置中配置别名
在根目录的vite.config.js中：
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
resolve: {
alias: {
'@common': resolve(__dirname, 'packages/common'),
},
},
});3. 在App中导入静态JS文件
// 动态导入
const utils = await import('@common/public/utils.js');
// 或者使用script标签
const script = document.createElement('script');
script.src = '/packages/common/public/utils.js';
document.head.appendChild(script);方法三：使用Vite的Assets模块
1. 将JS文件放在assets目录
packages/common/assets/js/utils.js
2. 配置Vite处理静态资源
在Common包的vite.config.js中：
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
publicDir: 'public',
build: {
assetsDir: 'assets',
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
},
},
},
});3. 在App中导入
import utilsUrl from '@common/assets/js/utils.js?url';
// 动态加载
const script = document.createElement('script');
script.src = utilsUrl;
document.head.appendChild(script);最佳实践建议
构建时导入：对于需要在构建时处理的JS文件，使用方法一
运行时导入：对于需要在运行时动态加载的JS文件，使用方法二或三
路径解析：确保在vite.config.js中正确配置了别名和路径解析
开发体验：考虑使用symlink或workspace协议来改善开发时的依赖解析
常见问题解决
问题1：模块未找到
确保在package.json中正确声明了依赖，并且已经运行了构建命令。
问题2：路径解析错误
检查vite.config.js中的alias配置是否正确，确保路径解析指向正确的目录。
问题3：开发服务器热更新失效
对于Monorepo项目，可能需要重启开发服务器以确保依赖变更被正确识别。
通过以上方法，你可以在Vite Monorepo项目中灵活地使用common包的静态JS文件，根据具体需求选择最适合的导入方式。