reactjs - Electron.js和带有Pack-react-app的webpack

Question

我想在带有react.js的electronic.js项目中使用webpack

我和cra一起开始了一个项目。由于某种原因，我获得了一些漏洞，因此我删除了node_modules文件夹和yarn.lock并重新安装。当我执行“yarn start”时，即使用cra时，我不应该使用webpack的错误。

[0] There might be a problem with the project dependency tree.
[0] It is likely not a bug in Create React App, but something you need to fix locally.
[0] 
[0] The react-scripts package provided by Create React App requires a dependency:
[0] 
[0]   "webpack": "4.41.5"
[0] 
[0] Don't try to install it manually: your package manager does it automatically.
[0] However, a different version of webpack was detected higher up in the tree:
[0] 
[0]   /user/name/programming/electron/asdf/node_modules/webpack (version: 4.41.6) 
[0] 
[0] Manually installing incompatible versions is known to cause hard-to-debug issues.
[0] 
[0] If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
[0] That will permanently disable this message but you might encounter other issues.
[0] 
[0] To fix the dependency tree, try following the steps below in the exact order:
[0] 
[0]   1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
[0]   2. Delete node_modules in your project folder.
[0]   3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
[0]   4. Run npm install or yarn, depending on the package manager you use.
[0] 
[0] In most cases, this should be enough to fix the problem.
[0] If this has not helped, there are a few other things you can try:
[0] 
[0]   5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
[0]      This may help because npm has known issues with package hoisting which may get resolved in future versions.
[0] 
[0]   6. Check if /is/private/programming/electron/qwerty/node_modules/webpack is outside your project directory.
[0]      For example, you might have accidentally installed something in your home folder.
[0] 
[0]   7. Try running npm ls webpack in your project folder.
[0]      This will tell you which other package (apart from the expected react-scripts) installed webpack.
[0] 
[0] If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
[0] That would permanently disable this preflight check in case you want to proceed anyway.
[0] 
[0] P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!
[0] 
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! electron-react-typescript-boilerplate@0.2.5 react-start: `react-scripts start`
[0] npm ERR! Exit status 1
[0] npm ERR! 
[0] npm ERR! Failed at the electron-react-typescript-boilerplate@0.2.5 react-start script.
[0] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[0] 
[0] npm ERR! A complete log of this run can be found in:
[0] npm ERR!     /nooo/oooo/.npm/_logs/2020-02-26T13_13_02_140Z-debug.log
[0] cross-env BROWSER=none npm run react-start exited with code 1

发生此错误是因为我手动安装了webpack。因此，我删除了webpack，但我认为我需要webpack。有没有办法在cras中使用electron.js中的webpack，而不会弹出或使用其他 bundle 程序。

PS我也使用 typescript 。

Answer 1

这涉及相当多的配置步骤。要使 Electron 与create react app一起工作而不会弹出，请按照下列步骤操作:

1)安装软件包

npx create-react-app
npm install --save-dev electron

2)添加 Electron src/main.js 的主要过程

使用 basic example并修改 loadURL。

本地开发

mainWindow.loadURL('http://localhost:3000');

生产

const startUrl = url.format({
    pathname: path.join(__dirname, '/../build/index.html'),
    protocol: 'file:',
    slashes: true
});
mainWindow.loadURL(startUrl);

3)将 main条目添加到package.json

package.json

{
  "main": "src/main.js",
  "scripts": {
    "electron": "electron ."
  }
}

4)跑

在不同的控制台中运行这些命令。等待 react 服务器启动，然后启动 Electron 。

npm run start
npm run electron

5)使 Electron 在 react 应用程序中可用

const electron = window.require('electron');
const fs = electron.remote.require('fs');
const ipcRenderer  = electron.ipcRenderer;

有关更多详细信息和常见问题，您可能需要研究此 freecodecamp tutorial。

如果您在主进程和渲染器之间的通信中遇到问题，则可能仍要调整Webpack配置。在使用弹出菜单之前，您应该先查看 react-app-rewired。