为啥我的 electron-forge 和 webpack 模板会使用空的 node_module 文件夹制作可分发文件？

Posted 2023-03-07

【中文标题】为啥我的 electron-forge 和 webpack 模板会使用空的 node_module 文件夹制作可分发文件？

【英文标题】：Why does my electron-forge with webpack template makes distributables with empty node_module folders?为什么我的 electron-forge 和 webpack 模板会使用空的 node_module 文件夹制作可分发文件？

【发布时间】：2021-08-07 06:19:45

【问题描述】：

我最近正在尝试使用 webpack 捆绑器的 electron 12，并且最近意识到每次它使用 yarn make 构建一个可分发文件时，构建的 node_module 文件夹是空的。因此，因为我通过暴露一些模块ContextBridge 来自 preload.js，应用程序崩溃并抛出丢失的错误消息。

不管怎样，在我手动将整个 node_module 文件夹复制到其中之后，它就可以工作了。

【问题讨论】：

你的依赖是devDependencies吗？ devDependencies 不包含在可分发文件中

不，我将我的预期开发依赖项分开。这是我的依赖项列表。 "dependencies": "@fortawesome/fontawesome-free": "^5.15.3", "@reduxjs/toolkit": "^1.5.1", "axios": "^0.21.1", "bootstrap": "^5.0.0", "electron-is-dev": "^2.0.0", "electron-squirrel-startup": "^1.0.0", "qrcode": "^1.4.4", "react": "^17.0.2", "react-bootstrap": "^1.5.2", "react-dom": "^17.0.2", "react-redux": "^7.2.4", "redux": "^4.1.0", "redux-thunk": "^2.3.0" 在dist中，从preload脚本中导入qrnode等依赖。

【参考方案1】：

electron-forge 和 Webpack 的默认配置会捆绑您的 main/preload/renderer 代码。

这主要是积极的影响：

更紧凑的可分发内容，没有node_modules 中存在的所有内容 如果您使用的是 nodeIntegration: false，则渲染器中没有 require，因此如果您想使用依赖项，则需要捆绑代码 启动时间更快，因为： require'ing 数百甚至数千个单独的文件可能会很慢 您的代码已最小化且更小，因此 Chrome 在启动时解析的代码更少

什么是负面的？

并非所有 node.js 模块都支持捆绑 原生模块通常与捆绑不兼容

【讨论】：

现在这就是我无法在渲染器上使用 qrcode 和其他模块的原因。谢谢。