Rollup打包错误,onMounted中无法import？

  • Z时代
  • 2024-02-09
  • 分类：IT

RollupError: Invalid value "umd" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

问题起因：vitepress内build的时候报错window is not defined,后查明是icon组件内iconfont.js有使用window。

改写为

<script lang="ts" setup>
import { computed, onMounted } from 'vue';
import './index.css';
// import './font/iconfont.js';
onMounted(() => {
    //@ts-ignore
    import('./font/iconfont.js').then(() => { });
})

rollup -c 打包会报错！！！

//rollup.config.js配置
module.exports = {

input: './packages/index.ts',
output: {
    name: 'XXXXXXX',
    file: file('umd'),
    format: 'umd' // 编译模式
},
plugins: [
    nodeResolve(),
    typescript({ tsconfigOverride: overrides }),
    vuePlugin(),
    postcss({
        plugins: [autoprefixer()],
        extract: 'style.css'
    })
],
external: ['vue'] // 依赖模块

}

回答：

目测是因为你配置的 output.format 是 UMD，而 UMD 和 IIFE 均不支持分包（code splitting），所以也就不支持动态 import 另外的依赖。

解决方案的话，可以考虑把 iconfont 直接放到 html 里，作为全局依赖。反正图标嘛，除非你打算优化，否则的话放全局使用应该很合理。

以上是 Rollup打包错误,onMounted中无法import？ 的全部内容， 来源链接： utcz.com/p/935285.html

回到顶部