Рабочее пространство frontend

Рабочее пространство frontend#

Клиентский код пишется в редакторе vscode в рабочем пространстве. Рабочее пространство позволяет одновременно работать с несколькими nodejs проектами.

Рабочее пространство веб расширений распологается по адресу: btk/src/web/ext/packages.code-workspace

Nodejs проект#

Фронтент код компилируется с помощью технологии nodejs.

Шаблон проекта:

  • node_modules
    Модули, необходимые для разработки и компиляции проекта. Данные модули закачиваются при инициализации проекта с помощью менеджера пакетов npm

  • src
    Исходный код

  • package.json
    Содержит перечень зависимостей необходимых для компиляции и выполнения проекта, а так же необходимые скрипты для разработки.

  • rollup.mjs
    Содержит правила сборки проекта в rollup.

  • tsconfig.json
    Содержит настройки языка typescript для проекта.

gs-web-dtk#

Nodejs проект, предоставляющий общий код в веб расширения, располагается по пути btk/src/web/ext/gs-web-dtk

Веб расширение#

Nodejs проект, реализующий веб расширение, располагается по пути btk/src/web/ext/packages/[web_extension_name]

Для обеспечения удобной отладки и модификации кода, модуль gs-web-dtk подключается по исходному коду. Это приводит к следующим особенностям в конфигурации веб расширения:

  • Корнем сборки является каталог рабочего пространства

  • Необходимо жестко определять корневой репозиторий node_modules, так как @rollup/plugin-node-resolve смотрит так же в репозитории модуля gs-web-dtk

  • Необходимо для общих модулей указывать правило разрешения конфликта.

    Примечание

    Если gs-web-dtk не будет иметь собственного стандартного репозитория модулей, подсказчик vscode не сможет корректно осуществлять проверку синтаксиса.

Пример конфигурации plugin-node-resolve:

    nodeResolve(
      {browser: true,
       dedupe: ['react', 'react-dom'],
       rootDir: process.cwd()
      }
    )

Пример конфигурации tsconfig.json для веб расширения:

{
    "compilerOptions": {
      "rootDir": "../../",
      "sourceMap": true,
      "module": "ES6",
      "jsx": "react",
      "moduleResolution": "node",
      "esModuleInterop": true,
      "baseUrl": "../../",
      "paths": {
        "gs-web-dtk": ["gs-web-dtk/src/index.ts"],
        "*" : ["packages/dashboard/node_modules/*"]
      },
      "lib": ["es2018","DOM"]
    }
}

Подготовка к работе#

  1. Установите nodejs
    https://nodejs.org/en/

  2. Откройте workspace vscode

  3. Включите закладку npn scripts
    Перечень доступных закладок находится под 3 точками в заголовке Explorer

  4. Подготовьте к работе gw-web-dtk
    Выполните npm script: gs-web-dtk > package.json > npm_install

  5. Подготовьте пакет к работе
    Выполните npm script: npm_install

Редактирование исходного кода#

  1. Отредактируйте файлы

  2. Нажмите сохранить

  3. Выполните npm script: build \

    Внимание

    Скрипт должен быть выполнент для текущего веб расширения

  4. Дождитесь компиляция бандла

Примечание

Чтобы исключить необходимость пересборки проекта в Intellij idea при компиляции в vscode в rollup проект добавлен следующий хук:

    copy({
      targets: [
        { src: '../../../../main/resources/ru/bitec/app/btk/dashboard/web', dest: '../../../../../target/scala-2.12/classes/ru/bitec/app/btk/dashboard' },
      ],
      hook:'writeBundle'
    })

Данный хук копирует скомпилированный код в собранные файлы проекта.

Отладка проекта#

Отладка в chrome#

  1. Обновите страницу браузера, чтобы исключить устаревшие копии исходного кода

  2. Откройте инструмент разработчика и перейдите на вкладку «Sources»

  3. Откройте требуемый файл
    Файлы находится в папке {host}/webserver/sid/{guid}/siv/web

  4. Установите точку остановки

Отладка в vscode#

  1. Запустите браузер в режиме отладки
    Для этого выполните команду chrome.exe --remote-debugging-port=9229

  2. В разделе отладке запустите цель Attache chrome

  3. Откройте требуемый файл

  4. Установите точку остановки

Настройка отладки в vscode#

Для настройки отладки в новом проекте создайте файл .vscode/launch.json с следующим содержимым:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach Chrome against localhost",
            "type": "chrome",
            "request": "attach",
            "port": 9229,
            "sourceMapPathOverrides": {
                "../../../../../../../../web/ext/*": "${workspaceFolder}/../../*"
            }
        }
    ]
}

Совет

Для диагностики отладки в debug console воспользуйтесь командой .scripts

Данная команда помогает корректно настроить sourceMapPathOverrides для работы с точками прерывания.

Содержание