electron使用rollup打包后,运行报错Could not dynamically require……

同学们可以私信我加入学习群!


@TOC


分析

这报错信息意思是rollup不支持动态的require,全部报错信息为:

==Could not dynamically require "./src/cat". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work==

打开软件时,报错如图:

这是我在electron项目中引入shelljs插件时引发的报错,引入方式为静态引入,但是有可能shelljs中存在动态引入,所以rollup打包时会报错无法支持动态引入的方式。


解决

可能会有很多种方式解决这个问题,我采用最方便的方式,将有问题的模块排除在外,让打包后的代码在运行时直接从node_modules中加载模块,一劳永逸。

简单而言,就是在vite或者rollup中配置external参数。如:

c 复制代码
external:[
        "electron",
        "shelljs"
    ]

看过前面我对rollup打包electron的介绍应该知道,我以脚本的方式加载了对rollup定制化的一些参数,我的rollup脚本是"rollup.config.main.js",这里的参数会覆盖vite.config.js中的参数,所以我如果在vite.config.js中配置external会无效。

如果各位同学所有的rollup参数都在vite.config.js中配置或者以插件的方式引入vite.config.js,那就不用考虑覆盖的问题。这个视情况而定。


总结

以后在electron的主进程中引入插件可能还会遇到这个问题,到时候统一使用这种方式排除模块即可。node版本管理可视化工具马上就要完成了,有兴趣的小伙伴可以提前关注一波。

相关推荐
LIUENG14 分钟前
Vue3 响应式原理
前端·vue.js
wycode1 小时前
Vue2实践(3)之用component做一个动态表单(二)
前端·javascript·vue.js
wycode2 小时前
Vue2实践(2)之用component做一个动态表单(一)
前端·javascript·vue.js
第七种黄昏2 小时前
Vue3 中的 ref、模板引用和 defineExpose 详解
前端·javascript·vue.js
pepedd8643 小时前
还在开发vue2老项目吗?本文带你梳理vue版本区别
前端·vue.js·trae
前端缘梦3 小时前
深入理解 Vue 中的虚拟 DOM:原理与实战价值
前端·vue.js·面试
HWL56794 小时前
pnpm(Performant npm)的安装
前端·vue.js·npm·node.js
柯南95274 小时前
Vue 3 reactive.ts 源码理解
vue.js
柯南95274 小时前
Vue 3 Ref 源码解析
vue.js
小高0075 小时前
面试官:npm run build 到底干了什么?从 package.json 到 dist 的 7 步拆解
前端·javascript·vue.js