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

项目背景

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

相关推荐
WujieLi21 小时前
初识 Vite+:一文了解 Rust 驱动的新一代前端工具链
javascript·rust·vite
却尘1 天前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
萌萌哒草头将军2 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
晓得迷路了2 天前
栗子前端技术周刊第 102 期 - Vite+ 正式发布、React Native 0.82、Nitro v3 alpha 版...
前端·javascript·vite
jason_yang5 天前
vue3中使用auto-import与cdn插件冲突问题
vue.js·vite·cdn
进阶的鱼5 天前
React+ts+vite脚手架搭建(五)【规范篇】
前端·react.js·vite
xiaohe06018 天前
👋 一起写一个基于虚拟模块的密钥管理 Rollup 插件吧(四)
vite·rollup.js
parade岁月8 天前
nuxt和vite使用环境比变量对比
前端·vite·nuxt.js
一枚前端小能手8 天前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
萌萌哒草头将军9 天前
尤雨溪强烈推荐的这个库你一定要知道 ⚡️⚡️⚡️
前端·vue.js·vite