Rollup打包错误,onMounted中无法import?
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个回答
test
2024-06-23
目测是因为你配置的 output.format
是 UMD,而 UMD 和 IIFE 均不支持分包(code splitting),所以也就不支持动态 import
另外的依赖。
解决方案的话,可以考虑把 iconfont 直接放到 html 里,作为全局依赖。反正图标嘛,除非你打算优化,否则的话放全局使用应该很合理。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容