Электрон пишет простой инструмент для переключения хостов

внешний интерфейс React.js Electron Redux

Работа разработчика требует частогоhostПереключайся, быстро разрабатывай и тестируй в разных средах.Внутри али есть iHost, который прост в использовании, но к сожалению не открывается.После ухода не нашел лучшего для использования.hostПереключите инструменты и просто напишите один самостоятельно. Проект находится в открытом доступе

кодовый адрес, Тукао приветствую.

используемая технология

Поскольку это настольное приложение, в качестве фронтенд-разработки в настоящее время первым выбором, естественно, является eletron, а фронтэнд-фреймворк выбирает стек технологий реагирования.

проект на основеelectron-react0-boilerplateГенерация, используемые методы включают в себя:

  1. react 16.x
  2. redux 4.x
  3. redux-thunk 2.x
  4. react-router 4.x
  5. ant-design 3.x
  6. reselect 3.x
  7. redux-actions 3.x
  8. webpack 4.x
  9. node-sass 4.x

Основная логика и представление

Сложность всего приложения на самом деле невелика, главное генерировать некоторые предметы, исходя из статуса активации предметовhostОсновные операции для чтения и записи файлов следующие:

особенности дизайна

  1. три вкладки
    • страница настроек хоста: добавление, удаление, изменение и проверка записей хоста
    • Текущий действующий хост: просмотр текущего действующего хоста системы.
    • Исходный хост: после запуска приложения копия исходного файла хоста будет сохранена для восстановления.
  2. настройки хоста
    • Возможность создания записи хоста и записи соответствующего хоста
    • Вы можете добавлять, удалять, изменять и проверять хост
    • В то же время можно создать группу хостов для унифицированного управления.
    • Установите флажок слева, редактирование настроек активного хоста изменит хост системы в реальном времени, но во время редактирования устанавливается 2-секундная задержка, чтобы избежать частого чтения и записи файлов во время непрерывного процесса ввода.

Вся функция приложения настолько проста, что ключевым моментом является проблема с разрешением, для работы с файлом хоста необходимо изменить/private/etc/hostсумма файлов/private/etcразрешения каталога. Поэтому при запуске приложения всплывет всплывающее окно для ввода пароля пользователя компьютера для авторизации.

Задокументируйте несколько основных используемых технологий

redux-actions и bindActionCreators

Проекты на основе Redux часто критикуют за громоздкие действия и редукторы, а также слишком много шаблонного кода.redux-actionsЭто хороший инструмент для решения этой проблемы, пожалуйста, изучите конкретное использование самостоятельно. Тем не менее, стоит отметить, что редуксbindActionCreatorsВложенные объекты actionCreators не поддерживаются, например.

const actionsCreators = {
	add: function() {
		xx
	}，
	change: {
		changeTitle: function() {
			xx
		},
		changeDate: function() {
			xx
		}
	}
}

const { add, change } = bindActionCreators(actionsCreator, dispatch)

Измененные здесь actionCreators не будут успешно связаны, потому чтоredux-actionsСгенерированные actionCreators могут быть вложены друг в друга, поэтому исходныйbindActionCreatorsа такжеredux-actionsНеудобно совмещать. Проект был немного переписан.bindActionCreatorsСделайте так, чтобы он поддерживал вложенность.

reselect

Для некоторых данных, основанных на вычислениях, одновременное хранение исходных данных и расчетных данных в хранилище не является хорошим решением, так как каждое обновление необходимо обновлять дважды, что легко пропустить.reduxотличный отmobx, mobxсуществуетcomputedДекораторы используются для решения проблемы вычисляемых свойств. В настоящее времяreselectОн очень удобен, он не только решает проблему вычислительных данных, но его большая ценность заключается в сокращении повторных вычислений, каждый раз ререндеринг вычисляет большой объем данных без повторения вычисления, когда входные параметры остаются неизменными. Но проблема в том, что их будет больше.selectorsСлой, может быть, это сведет некоторых с ума, шарлатан~~

постоянное хранилище состояния

Чтобы поддерживать предыдущее состояние каждый раз, когда приложение открывается, необходимо сохранить весь уровень магазина, поэтому с помощьюelectron-json-storageНаписал простое промежуточное ПО для редукции:


import storage from 'electron-json-storage';

// 同步 store 到某个文件的持久化存储中间件, 基于electron-json-storage做存储

const storageState = store => dispatch => action => {

  dispatch(action);
  
  const nextState = store.getState();
  
  const { menuTree, checkedKeys } = nextState.host.menus;
  
  const { systemHost } = nextState.host.systemHost;
  
  const defaultDataPath = 	storage.getDefaultDataPath();
  
  const dataPath = storage.getDataPath();
  
  console.log('paths:', defaultDataPath, dataPath);
  
  storage.set('HostState-xu', nextState); // 会创建一个HostState-xu.json的文件，尽可能保证唯一性，不与其他应用冲突
};
export default storageState;

каждый разactionИзменения синхронизируютсяstate.

electron-react-boilerplateямы

флоу и эслинт

Flowи немногоeslintПравила доставят много хлопот и лишней работы на ранней стадии, поэтому некоторые правила можно модифицировать по своему усмотрению, но дляFlowа такжеeslintЛично рекомендуется использовать его много, что впоследствии уменьшит множество мелких проблем.

Но в проектеeslint-importПлагин объединяетwebpackнастраиватьaliasБудут проблемы, когда то же самое для тестовых случаев,webpackизaliasКонфигурация также не вступит в силу.

Несколько ключевых моментов обработки:

  1. .eslintrc необходимо изменить на .eslintrc.js
  2. Упоминается в .eslintrc.jspathнужноrequire, Не можемimport
  3. Измените на .eslintrc.js, и он появится в vscode.Eslint serverПроблема зависания в основном из-за проектаwebpack.config.render.dev.jsОбнаружение переменной среды выполняется само по себеCheckNodeEnv('development'), закомментируйте эту строку кода.

electron-react-boilerplateПри постоянном обновлении последняя версия конфигурации eslint может не совпадать с моей на тот момент, а некоторый опыт обработки также может быть устаревшим. Перечислите некоторые справочные проблемы:#620 ,#1321 , #1509

Цитирование изображений

Всегда есть проблема с путем к эталонному изображению после упаковки, официальная рекомендация — передавать его в процессе рендера.requireПредставь картинки и пройдиloaderгенерироватьbase64фотографии напрямую черезpath.joinа также__dirnameПуть генерации подходит для среды разработки, но после упаковки будет сообщено об ошибке.

Однако есть и проблема с использованием картинок в основном процессе, план апелляции не вступает в силу, и решение пока не найдено, а актуальныеissue

по-видимомуelectronБудут некоторые проблемы в среде разработки и генерации статического пути к ресурсам .

исполняемый файл оболочки

хотел бы использоватьshelljsВыполните некоторую обработку команд, но обнаружили, что онаelectronПроблемы совместимостиelectron-compatibility

Поскольку требования не сложны, используйте их напрямую.child_process.execдля обработки.

Странная проблема с упаковкой

Из-за проблемы с введением образа я часто упаковываю и проверяю, а затем возвращаюсь, чтобы найти проблему.Если есть проблема с последним пакетом, я упакую его снова после модификации и обнаружу, что программа все еще не может быть запущена , В это время его необходимо отключить от сети для успешного запуска. Неизвестно почему.

резюме этапа

Это первый раз, когда нужно написать полный электронный проект для решения реальных потребностей.Это довольно интересно.Последующий проект должен выполнить некоторое тестирование, непрерывную интеграцию и автоматическую обработку обновлений.В настоящее время опыта недостаточно. Друзья сообщества, пожалуйста, больше советуйте, учите, учитесь вместе!

Категории