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

Question

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

}

Answer 1

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

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

Answer 2

从你给出的错误信息来看，Rollup 打包时出现的问题是 "Invalid value 'umd' for option 'output.format' - UMD and IIFE output formats are not supported for code-splitting builds." 这个错误表示你正在尝试使用 UMD 格式进行代码分割，但 Rollup 不支持这种格式的代码分割。

解决这个问题的一种方法是改变你的 rollup.config.js 配置文件中的 output.format。你可以尝试将 format 改为 'cjs' 或 'esm'，具体取决于你的需求。例如：

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

这样更改之后，你可以尝试重新运行 rollup -c 命令。请注意，cjs 代表 CommonJS，而 esm 代表 ES Modules，这两种格式都支持代码分割。

另外，关于 window is not defined 的错误，这可能是因为你在服务器端渲染（SSR）或构建生产版本的应用时，尝试访问了 window 对象。window 对象是浏览器提供的全局对象，在非浏览器环境（如 Node.js）中是不可用的。如果你的应用需要在非浏览器环境中运行，你需要寻找替代方案来处理与 window 对象相关的问题。