Overwolf, Angular и я

Это серия статей о моем путешествии по изучению использования и адаптации инструментов, предоставляемых Angular-cli для разработки Overwolf.

Если вы никогда не слышали о Overwolf или о том, как разрабатывать приложения на их платформе, проверьте документацию.

Расширения Overwolf (или синоним «приложений Overwolf») работают на движке браузера на основе хрома, поэтому разработка очень похожа на роскошную (из-за отсутствия кроссбраузерной суеты) веб-разработку.

Я активно разрабатываю и поддерживаю приложение на Angular под названием Legendary Builds. Проект начался около 2 лет назад с AngularJS и перешел на Angular 2,3,4 с использованием настраиваемой настройки сборки Gulp.

Я наконец готов заняться переносом всего проекта на использование Angular-cli, переосмыслив процесс сборки и попутно выполняя оптимизацию. Я мог бы опубликовать несколько более общих историй, если появится что-то интересное, но по большей части я в основном хочу документировать свои (надеюсь, успешные) усилия, чтобы все хорошее, что предлагает Angular, бесперебойно работало в среде Overwolf. (Edit 2018 –07–11: Сейчас я держу свою сборку на основе gulp немного дольше, пока не удастся выбросить конфигурацию angular 6+ cli, чтобы поработать с базовой сборкой webpack.)

Используемые версии на момент написания:

Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64
Angular: 6.0.4

Давайте начнем!

Использование Angular-cli с Overwolf

Начнем с ручного подхода к созданию Angular-приложения для Overwolf.

Создайте новое приложение с помощью angular-cli

$> npm i -g angular-cli
$> ng new --prefix=myApp ow-ng-app
$> cd ow-ng-app

Добавить обязательные овервольф-активы

.../ow-ng-app/src/overwolf/manifest.json
.../ow-ng-app/src/overwolf/IconMouseNormal.png
.../ow-ng-app/src/overwolf/IconMouseOver.png
.../ow-ng-app/src/overwolf/LauncherIcon.ico

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

manifest.json

{
 "manifest_version":1,
 "type":"WebApp",
 "meta":{
  "name":"Overwolf Angular Demo",
  "version":"0.0.1",
  "minimum-overwolf-version":"0.115.2",
  "author":"Developer Name",
  "icon":"IconMouseOver.png",
  "icon_gray":"IconMouseNormal.png",
  "launcher_icon":"LauncherIcon.ico",
  "description":"Demo of an Overwolf App with Angular-cli"
 },
 "data": {
  "start_window":"MainWindow",
  "windows":{
   "MainWindow":{
     "file":"index.html",
     "transparent": true,
     "resizable": true,
     "use_os_windowing": true,
     "size": {
      "width":700,
      "height":400
      },
     "min_size": {
      "width":400,
      "height":400
     }
    }
  }
 }
}

Только изменения, отличные от Демо-приложения:

удалено подокно
использование index.html вместо /Files/index.html
для свойства MainWindow.file
Добавление launcher_icon

Добавьте активы Overwolf в процесс сборки

Чтобы включить дополнительные активы в наши файлы распространения, нам нужно добавить их в angular.json. Мы хотим, чтобы все файлы в /src/overwolf были включены в корневой каталог нашего результирующего приложения Overwolf.

.../ow-ng-app/angular.json:
[...]
"projects": {
    "ow-ng-app": {
      [...]
      "architect": {
        "build": {
          [...]
          "options": {
            [...]
            "assets": [
              [...]
               {"glob":"**/*","input":"src/overwolf/","output":"/"}
            ],  
[...]

Это будет включать все файлы в нашем /src/overwolf каталоге и копировать их в корневую папку нашего вывода.

Разработка приложения

Теперь, когда у нас есть базовый проект, нам просто нужно запустить его с Overwolf и начать кодирование.

Проблема здесь в том, что $> ng serve не знает о нашей необходимости запускать его с Overwolf. Я надеюсь, что смогу решить эту проблему в одной из следующих частей этой серии, а пока нам нужно довольствоваться некоторой ручной работой.

Запустите процесс сборки

$> ng build --watch

пока придется делать все, но не обслуживать его на веб-сервере.

Запустите приложение

Наше приложение теперь находится в .../ow-ng-app/dist/ow-ng-app/*

Мы можем просто загрузить этот каталог как распакованное расширение со страницы «Пакеты Overwolf» overwolf://packages

Окончательный код этой статьи можно найти на Github

Итак, теперь мы получили базовое представление о том, как запустить проект, который мы можем запустить в Overwolf, используя полезные свойства Angular-cli.

Во Части 2 серии мы собираемся настроить Live-Reload, чтобы сделать нашу жизнь немного более комфортной при разработке нашего приложения.

Overwolf, Angular и я - Часть 1