项目背景
- vue3 + ts + vite
- 打包组件库
我想要生成/dist
,/lib
,/es
三个目录,分别存放umd&esm、cjs和es模式的问题,然后使用vite.config配置,因为vite 的 build也是基于rollup打包的,所以这里可以配置rollup相关的配置
问题复现
先看我的配置:
ts
build: {
minify: false,
rollupOptions: {
output: [
{
format: 'es',
entryFileNames: '[name].js',
preserveModules: true,
dir: 'es',
exports: 'named',
preserveModulesRoot: 'src'
},
{
format: 'cjs',
entryFileNames: '[name].js',
preserveModules: true,
dir: 'lib',
exports: 'named',
preserveModulesRoot: 'src'
},
{
format: 'umd',
name: 'infra-ui',
file: 'lib/index.umd.js',
globals: {
vue: 'Vue',
vant: 'vant'
}
},
{
format: 'esm',
file: 'lib/index.esm.js',
exports: undefined
}
]
}
}
可以发现这是一个很常规的配置,所以我直接打包,就报了如下的错误
查了下说的是 umd 但入口配置file,es和cjs是多入口配置dir,但是看了自己的配置没问题,所以就直接郁闷了。于是一个一个排查发现rollupOptions.build
的配置顺序有影响,于是我把umd和esm放到了前面,es和cjs放到后面,然后去掉file
字段,发现就好了???
ts
build: {
minify: false,
rollupOptions: {
output: [
{
format: 'umd',
name: 'infra-ui',
globals: {
vue: 'Vue',
vant: 'vant'
}
},
{
format: 'esm',
exports: undefined
},
{
format: 'es',
entryFileNames: '[name].js',
preserveModules: true,
dir: 'es',
exports: 'named',
preserveModulesRoot: 'src'
},
{
format: 'cjs',
entryFileNames: '[name].js',
preserveModules: true,
dir: 'lib',
exports: 'named',
preserveModulesRoot: 'src'
}
]
}
}
谁懂啊,家人们,有知道的小伙伴可以在评论区告知一下,感谢! 其实直接使用rollup打包也需要分成两次来打,一次打全局的,一次打单个文件的也就是preserveModules
这个字段配置,但是按照常理来说,打包应该是一次编译,多个格式输出,不懂为啥会和顺序有关。