javascript - 让 webpack 忽略某个导入

Question

我正在尝试使用 ElectronJS 创建桌面应用程序和 ReactJS .

渲染器进程使用 webpack 捆绑，因为我在其中使用了 JSX。

当我尝试在渲染器中从 Electron 导入任何东西时(例如 import electron from 'electron';，或 const electron = require('electron');)当我尝试使用 webpack(Web 部件)构建它时，或者当我使用 webpack-dev-server 并在 Electron 中打开本地主机 URL 时，我遇到了这两个错误:

https://pastebin.com/WdkCcPzm

请注意，我没有使用 create-react-app，bundle.js 是 webpack 的输出，App.jsx 是我正在尝试从中导入 Electron 的文件，我想导入 Electron 以访问 ipcRenderer 变量，并且我没有尝试从渲染器进程(或从主进程)导入 fs事)。

我找到的解决方案是通过将此行添加到我的 index.js

来绕过 webpack 的打包

eval('window.Electron = require("electron")');

并通过变量 Electron 访问 electron(大写 E 是因为 vs code 将其识别为命名空间，即使未导入 electron，因此我仍然可以完成代码)

但这真的很难看，我希望有另一种解决方案。

Answer 1

为了为 Electron 应用程序的渲染进程构建包，webpack 提供了一个特殊的目标参数。

将此添加到您的 webpack 配置中:

target: 'electron-renderer'

参见文档:https://webpack.js.org/configuration/target/