为什么我的 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等依赖。

标签： webpack electron node-modules electron-forge

【解决方案1】：

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

这主要是积极的影响：

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

什么是负面的？

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

【讨论】：

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