vite配置umd、esm、cjs、es报错（Invalid value for option "output.dir" ...）

harperYG2023-10-11 18:11

项目背景

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这个字段配置，但是按照常理来说，打包应该是一次编译，多个格式输出，不懂为啥会和顺序有关。