Электрон. js и веб-пакет с приложением Creact-реагировать - PullRequest
Новая
       11

Электрон. js и веб-пакет с приложением Creact-реагировать

0 голосов
/ 26 февраля 2020

Я хотел использовать webpack в электронном виде. js проект с реагировать. js

И я начал проект с cra. По какой-то причине у меня появились некоторые уязвимости, поэтому я удалил папку node_modules и yarn.lock и переустановил. Когда я сделал «запуск пряжи», ошибка, что при использовании 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 в электронном виде. js, с cra, без извлечения или использования другого упаковщика.

PS Я также использую машинопись.

1 Ответ

1 голос
/ 26 февраля 2020

Это включает в себя довольно много шагов настройки. Чтобы электрон работал с create react app без извлечения, выполните следующие действия:

1) Установите пакеты 

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

2) Добавьте основной процесс для электрона src / main. js

Используйте базовый c пример и измените 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 в пакет. json

пакет. json 

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

4) Run

Запуск этих команд на разных консолях. Дождитесь запуска сервера реакции и затем запустите электрон. 

npm run start
npm run electron

5) Сделайте электрон доступным в приложении реагирования 

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

Для получения более подробной информации и общих проблем, вы можете посмотреть это freecodecamp tutorial .

Если у вас возникнут проблемы со связью между основным процессом и рендерером, вы все равно можете изменить конфигурацию webpack. Прежде чем использовать eject, вам следует ознакомиться с response-app-rewired .

...