Создавайте как для electronic.js, так и для целевых браузеров, используя webpack

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

Думаете, это звучит безумно? Другие инженеры со мной согласны! Вот цитата из статьи в Инженерном блоге Facebook за сентябрь 2015 года:

Один из уроков, который мы усвоили, заключался в том, что работать с отдельными репозиториями кода iOS и Android сложно даже при большом количестве инструментов и автоматизации. Когда мы создавали приложение, Facebook использовал эту модель, и все наши процессы автоматизации сборки и разработки были построены вокруг нее. Однако это плохо работает для продукта, который по большей части имеет единую общую базу кода JavaScript. К счастью, Facebook переходит на единый репозиторий для обеих платформ - потребуется только одна копия общего кода JavaScript, и синхронизация уйдет в прошлое.

Мотивация

Когда я глубоко погрузился в свой первый проект electronic + react на базе webpack, я увидел, насколько я близок к пакету для браузера. Практически идентичный веб-клиент был требованием MVP, поэтому я решил изменить каркас, с которого начал, чтобы это происходило легко.

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

(Это не включает горячую перезагрузку, тесты и все, что действительно выходит за рамки того, что необходимо для демонстрации этой функции webpack. Если вы хотите начать с более всеобъемлющего каркаса, их будет много, если вы выполните поиск в github по запросу «электрон webpack» и добавите эквивалентные настройки, упомянутые ниже.

Лично я считаю, что шаблон электронной реакции ченцулина является отличной отправной точкой для моего проекта Электронная / веб + реакция, и я смог легко изменить ее, чтобы все это выполнялось.)

Настройка проекта

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

$: npm install -g webpack webpack-dev-server electron-prebuilt // if you haven't already
$: npm install --save-dev minimist webpack-target-electron-renderer

Вы также можете установить глобально собранный электронный блок.

Базовая конфигурация электронного пакета Webpack

Это очень простая конфигурация для Electron. У него только одна цель сборки и пока нет особой логики.

Здесь мы используем проект webpack-target-electronic-renderer для более полнофункциональной электронной мишени, чем вариант «атом». Он ожидает, что мы передадим весь объект параметров в качестве параметра.

Затем мы настраиваем эшафот проекта как таковой:

src/index-electron.html
src/index.js // blank for now
index.js // when we call electron . this will be the main process
package.json

Наш файл /index.js выглядит так:

Все, что мы делаем здесь, это создаем простое электронное окно, которое открывает указанный файл index-electronics.html:

<!DOCTYPE html>
<html>
 <head>
 <meta charset=”utf-8">
 <title>Hello Electron React!</title>
 </head>
 <body>
 <script src=”../build/bundle.js”></script>
 </body>
</html>

Давайте представим наш первый скрипт для package.json:

“scripts”: {
   “electron”: “webpack && electron .”,
}

Теперь, когда мы запускаем «npm run electronic», приложение строится с помощью webpack и запускается внутри электронного приложения.

Указание "веб-цели"

Указав значение параметра webpack -, вы можете переопределить любой параметр в файле webpack.config.js. Это сделает наши многоцелевые сборки проще простого.

“scripts”: {
   “electron”: “webpack && electron .”,
   “web”: “webpack -—target web && webpack-dev-server --target web”
 }

Теперь, если мы запустим npm run web, build / bundle.js будет просматриваться и строиться с использованием целевой веб-страницы по умолчанию для webpack, переопределяя электронную цель, которую мы установили ранее.

Обеспечение многоцелевой поддержки сборки webpack

Теперь давайте поработаем с webpack и настроим его для сборки в несколько целевых каталогов. Это отлично подходит для того, чтобы быть уверенным, что мы всегда знаем, какие выходные данные сборки загружаем, и что мы можем запускать сборки обеих целей одновременно.

Давайте обновим webpack.config.js

Во-первых, мы вводим Minimist, чтобы мы могли анализировать переданные нами аргументы cli webpack до того, как webpack даже дойдет до них. Это дает нам возможность установить переменную isWeb, которую мы можем использовать для установки различных options.output.path в зависимости от того, какой аргумент передан.

Примечание. Нам не нужно делать ничего особенного с options.target, потому что флаг webpack - target web уже позаботится об этом за кулисами.

src / index.html должен выглядеть так:

<!DOCTYPE html>
<html>
 <head>
 <meta charset=”utf-8">
 <title>Hello Electron React!</title>
 </head>
 <body>
 <script src=”../build/web/bundle.js”></script>
 </body>
</html>

И src / index-electronics.html следует обновить соответствующим образом, чтобы указать новый путь к скрипту build / electronics / bundle.js.

Использование обнаружения окружающей среды

Теперь в index.js мы хотим убедиться, что приложение знает, в какой среде оно работает. В электроне мы называем это процессом «рендеринг», а в браузере мы бы просто назвали это средой выполнения браузера.

Чтобы вызвать встроенную электронную функциональность, приложение javascript должно знать, возможно ли это вообще! Webpack - целевая веб-сборка не будет завершена, даже если мы вызовем, например, require (‘ipc’) или другие встроенные электронные модули.

К счастью, поскольку мы находимся в node.js-land, для этого есть крошечный модуль!

npm install --save is-electron-renderer

Затем мы сделаем index.js таким:

console.log(
  ‘is this running in electron.js?: ‘,
  require(‘is-electron-renderer’)
);

is-electronic-renderer определит, отражает ли глобальный процесс соответствующую информацию, чтобы определить, является ли это процессом визуализатора. Это также будет работать в основном процессе (./index.js выше).

Запустить его!

npm run electron

Теперь для веб-версии:

npm run web

Посетите http: // localhost: 8080 / webpack-dev-server / src в своем браузере, и вы должны увидеть что-то вроде этого:

Создавайте как для electronic.js, так и для целевых браузеров, используя webpack