Как приложения Electron переходят от 0 к 1 с помощью приложения create-реагировать

внешний интерфейс Windows React.js Electron
Как приложения Electron переходят от 0 к 1 с помощью приложения create-реагировать

ElectronОфициальная документация вызывает у меня сложное чувство, а официальный стартер слишком прост, так что как представитьReactMengxin также очень сложно реализовать идеальный механизм упаковки 😭, поэтому я написал этот урок, основываясь на ямах, на которые я наступил, и я надеюсь, что каждый сможет что-то получить, прочитав его.

Для людей

Это руководство подходит для студентов, которые знают React и хотят изучить Electron, но не знают, как добавить React в Electron.

Структура статьи

1. Инициализировать проект на основе React

1. Инициализировать

Первый официальный сайт Facebookcreate-react-appСоздайте базовый проект. Вы можете установить его в соответствии с вашим любимым инструментом управления пакетами:

# npx
npx create-react-app react-electron-demo

# npm
npm init react-app react-electron-demo

# yarn
yarn create react-app react-electron-demo

После завершения установки каталог проекта выглядит следующим образом:

react-electron-demo
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── registerServiceWorker.js
└── yarn.lock

2. Удалите ServiceWorker и manifest.json

потому чтоElectronСтраница, прочитанная после упаковки, является локальным статическим ресурсом, поэтому не требуетсяServiceWorkerа такжеmanifest.json, роль этих двух вещей можете сами погуглить. Конкретные операции заключаются в следующем:

  • удалятьpublic/manifest.jsonдокумент.

  • удалятьpublic/index.htmlСледующий код для файла:

/* public/index.html:11行 */
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
  • удалятьsrc/registerServiceWorker.js.
  • удалятьsrc/index.jsиз следующих:
/* src/index.js:5行和7行 */
- import registerServiceWorker from './registerServiceWorker';

- registerServiceWorker();

3. Используйтеreact-app-rewired

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

  • (1) Установка
# npm
npm install react-app-rewired --save-dev
# yarn
yarn add -D react-app-rewired
  • (2) Создан в корневом каталогеconfig-overrides.jsфайл, содержимое файла следующее:
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
};
  • (3) Изменитьpackage.jsonКонфигурация, изменения следующие:
  /* package.json */

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
}
  • (4) Запустите проект, пакет
# 运行dev
npm run start
# 打包
npm run build

2. ДобавитьElectron

1. ДобавитьElectronвходной файл

  • (1) Новыйapp/index.js, содержимое файла следующее:
const { app, BrowserWindow } = require('electron');

let win;

function createWindow() {
  // 创建浏览器窗口。
  win = new BrowserWindow({ width: 800, height: 600 });

  // 然后加载应用的 index.html。
  win.loadURL('http://localhost:3000');

  // 当 window 被关闭，这个事件会被触发。
  win.on('closed', () => {
    win = null;
  });
}

app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

  • (2) вpackage.jsonдобавлено в"main": "app/index.js",ВыражатьElectronПуть входа приложения.

  • (3) ДобавитьElectronзапустить команду и установитьElectronполагаться.

npm install --save-dev electron

/* package.json */
"scripts": {
+ "start:electron": "electron app"
}
  • (4) Входnpm run start:electron, в среде разработкиElectronПриложение запускается.

2. Оптимизируйте запуск Электрона

Теперь, если вы хотите запустить режим разработки, вам нужно запустить две команды, а именноnpm run startа такжеnpm run start:electron, как мы можем запустить его одной командой?

  • нам нужно использоватьconcurrentlyдля запуска двух команд одновременно
  • Если вы хотите, чтобыreact-app-rewired startПри запуске не открывать браузер, нужно пройти вBROWSER=none, поэтому вам также необходимо установитьcross-envСовместим с передачей по значению.
  • Потому что при одновременном бегеElectronПри открытии сервер плохо работает, поэтому нужно использоватьwait-on 
npm install --save-dev concurrently cross-env wait-on

Добавить кpackage.jsonзапустить команду в .

/* package.json */

"script": {
-   "start": "react-app-rewired start",
+   "start": "concurrently \"npm run start:react\" \"npm run start:electron\"",
+   "start:react": "cross-env BROWSER=none react-app-rewired start",
-   "start:electron": "electron app",
+   "start:electron": "wait-on http://localhost:3000 && electron app",
}

пройти черезnpm run start

3. Добавьте инструменты отладки

Инструменты отладки примерно требуют отладки Electron и React.

Добавьте следующий код, чтобы добавить связанный с ReactChromeплагин и установитьDevtron, для отладки взаимодействия процессов Electron и т. д.; добавитьelectron-is-dev, используемый для определения того, является ли текущий Electron средой разработки или средой упаковки.

  • Установите необходимые зависимости.
npm install --save-dev electron-devtools-installer \
electron-debug \
devtron \

npm install --save electron-is-dev
  • Добавьте инструменты разработки в свой код.
/* app/index.js */
const isDev = require('electron-is-dev');

// 利用electron-debug，添加和Chrome类似的快捷键
isDev && require('electron-debug')({ enabled: true, showDevTools: false });
// 用于添加Chromium插件
function createDevTools() {
  const {
    default: installExtension,
    REACT_DEVELOPER_TOOLS,
    REDUX_DEVTOOLS,
  } = require('electron-devtools-installer');
  // 安装devtron
  const devtronExtension = require('devtron');
  devtronExtension.install();
  // 安装React开发者工具
  installExtension(REACT_DEVELOPER_TOOLS);
  installExtension(REDUX_DEVTOOLS);
}

// 修改应用启动事件
app.on('ready', () => {
  createWindow();
  // 只在开发环境加载开发者工具
  isDev && createDevTools();
});

После установки запуститеnpm run start,пройти черезCommand + Option + I(WindowsдляF12), чтобы запустить инструменты разработчика, а затем вы можете просмотреть его в расширенииReactа такжеReduxинструменты разработчика.

Теперь, когда базовая конфигурация разработки настроена, давайте посмотрим, как настроить функцию упаковки.

3. Упаковка

1. Установите зависимости

  • При упаковке нам нужно сначала установить зависимости, мы используемelectron-builderЧтобы упаковать, выполните следующую команду для установки.
npm install --save-dev electron-builder

2. Процесс упаковки и конфигурация

  • Основной процесс упаковки:
    • ПакетReactкbuildПод содержанием
    • копироватьElectronкод дляbuildПод содержанием
    • использоватьelectron-builderупаковать

В соответствии с описанным выше процессом добавьте соответствующую команду упаковки.

/* package.json */
{
  "scripts": {
-    "build": "react-app-rewired build",
+    "build": "npm run build:copy && npm run pack",
+    "build:react": "react-app-rewired build",
+    "build:copy": "npm run build:react && npm run copy:electron",
+    "pack": "electron-builder",
+    "copy:electron": "cp -r ./app/. ./build"
  }
}

Поскольку Electron обращается к локальным файлам, вам необходимо преобразовать файлы Webpack.output.publicPathУстановить как./. Требуются следующие модификации:

/* config-overrides.js */
module.exports = function override(config, env) {
  //do stuff with the webpack config...
+  if (env === "production") {
+    config.output.publicPath = './';
+  }
  return config;
};

Создать в корневом каталогеiconsПапки для хранения приложенийlogo, нашел в интернете один, который находится в папкеicon.pngа такжеicon.icns. затем вpackage.jsonДобавьте некоторую информацию о конфигурации.

{
  "build": {
    "productName": "Electron-React-Test",
    "extends": null,
    "files": ["build/**/*"],
    "mac": {
      "icon": "icons/icon.icns"
    },
    "win": {
      "target": "nsis",
      "icon": "icons/icon.png"
    },
    "linux": {
      "target": ["AppImage", "deb"],
      "icon": "icons/icon.png"
    },
    "extraMetadata": {
      "main": "build/index.js"
    },
    "directories": {
      "buildResources": "assets"
    }
  }
}

3. Измените входной файл Electron

  • Добавьте упакованную среду, доступURLадрес.
const isDev = require('electron-is-dev');
const path = require('path');

const devUrl = 'http://localhost:3000';
// 本地文件路径定位到打包的react文件
const localUrl = `file://${path.resolve(
  __dirname,
  '../../app.asar/build'
)}/index.html`;
const appUrl = isDev ? devUrl : localUrl;

function createWindow() {
  win = new BrowserWindow({ width: 800, height: 600 });

  // 然后加载应用的地址
  win.loadURL(appUrl);

  win.on('closed', () => {
    win = null;
  });
}

4. Добавьте конфигурацию упаковки системы Windows

Увеличьте, если необходимоWindowsФайл пакета системы должен находиться вpackage.jsonДобавьте следующий код в:

/* package.json */
{
  "scripts": {
+   "build:win": "npm run build:react-copy && npm run pack:win",
+   "pack:win": "electron-builder --win",
  }
}

затем бегиnpm run build:winВот и все.

Эпилог

После вышеперечисленных действий у нас получился базовый проект, который можно упаковать. Подробности смотрите в исходном кодеreact-electron-demoпроект.

Категории