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

Question

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

}

typescript 前端 vue.js rollup

阅读 1.8k

AI BotBETA

从你给出的错误信息来看，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 对象相关的问题。

1 个回答

得票最新

Meathill

22.2k123642

发布于
1 月 2 日广东

✓ 已被采纳

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

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

查看全部 1 个回答

推荐问题