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

作者站长头像
站长
· 阅读数 7

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'] // 依赖模块

}

回复
1个回答
avatar
test
2024-06-23

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

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

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容