Сегодня я попробовал новое локальное кодирование Salesforce и сразу же был впечатлен. Это функция, о которой я давно мечтал, и она обещает значительно ускорить разработку. Разработчикам Salesforce больше не нужно развертывать веб-компонент Lightning (LWC) в организации, обновлять страницу несколько раз, чтобы просмотреть изменения в компоненте. С локальным кодированием просто сохраните свой компонент и наблюдайте за обновлением браузера!
Для получения дополнительной информации о локальном кодировании и Salesforce DX, пожалуйста, прочитайте: https://developer.salesforce.com/blogs/2019/10/announcing-lwc-local-development-beta.html
Что мне понадобится?
Для работы этой установки вам необходимо установить следующее:
- Код Visual Studio
- Salesforce DX CLI и расширения Salesforce для Visual Studio Code
- Порт 3333 на вашем компьютере (по умолчанию для локального веб-сервера)
Дополнительное программное обеспечение:
- Chrome (для использования плагина браузера в VS Code)
- Предварительная версия в браузере (установка через магазин расширений в Visual Studio Code)
- Отладчик для Chrome (установите через магазин расширений в Visual Studio Code)
С чего начать?
Начать работу очень просто. Убедитесь, что вы обновили интерфейс командной строки sfdx до последней версии. (Откройте командную строку или терминал и введите sfdx update)
Поскольку локальное кодирование все еще находится в стадии бета-тестирования, вам нужно будет «вручную» установить локальный сервер. Для этого введите: sfdx plugins:install @salesforce/lwc-dev-server. Вы можете получить много сообщений о предупреждениях, которые, скорее всего, можно будет игнорировать.
Затем запустите локальный сервер с помощью следующей команды: sfdx force:lightning:lwc:start.
Совет: эти команды sfdx могут выполняться либо из терминала, либо из командной строки на вашей рабочей станции, либо через терминал в VS Code.
Теперь откройте браузер. Перейдите по адресу http://localhost:3333, и вы должны увидеть свой локальный сервер разработки во всей красе:
Выберите компонент и из списка и откройте его. Вернитесь к своему проекту DX в VS Code и отредактируйте компонент. Обратите внимание, как он обновляется автоматически! Нет необходимости возвращаться к своему экземпляру или сообществу Salesforce и обновлять страницу.
Что дальше?
Итак, теперь у нас есть живой сервер разработки. Потрясающий. Однако давайте сделаем еще один шаг и перенесем браузер (и отладку) в Visual Studio Code.
Установите отладчик для Chrome из Visual Studio Code/Extension Marketplace.
- Щелкните значок расширения в Visual Studio Code.
- Нажмите кнопку установки для расширения (не показано в примере)
Затем, следуя тем же шагам, установите плагин под названием Browser Preview.
Теперь, когда все необходимые расширения установлены, пришло время настроить расширение Browser Preview и предоставить предпросмотру браузера возможность достигать точек останова в Visual Studio Code.
Сначала вернитесь на панель расширений и найдите установленное расширение браузера Preview. Нажмите на значок настроек в правом нижнем углу, чтобы открыть настройки расширения.
Измените начальный URL-адрес на http://localhost:3333. Это URL-адрес по умолчанию для локального сервера разработки.
Теперь, когда вы открываете расширение Browser Preview в Visual Studio Code, оно автоматически загружает ваш локальный сервер разработки.
Наконец, давайте настроим мощный отладчик Visual Studio Code, чтобы он также работал с нашим рабочим процессом. В вашем проекте DX должна быть папка с именем .vscode. Эта папка содержит конфигурации Visual Studio Code и то, как он должен работать с вашим проектом. Давайте добавим некоторые параметры отладчика, чтобы Visual Studio Code прослушивал предварительный просмотр браузера/локальный сервер разработки.
Отредактируйте файл launch.json в папке .vscode вашего проекта. Добавьте эти две опции в массив конфигураций:
Вот пример действительного файла launch.json, чтобы вы могли увидеть полный формат:
Обратите внимание, как URL-адрес во второй конфигурации предварительного просмотра браузера указывает на локальный сервер разработки? Когда используется отладчик Visual Studio Code, он теперь запускает предварительный просмотр в браузере и по умолчанию отображает локальный сервер разработки. Как это круто?
Давайте отладим веб-компонент Lightning
- Нажмите на представление отладки в Visual Studio Code (см. изображение ниже).
- В раскрывающемся списке отладки выберите «Предварительный просмотр в браузере: запуск».
- Нажмите кнопку «Зеленая стрелка/воспроизведение» рядом с отладкой.
Теперь локальный сервер разработки должен открыться и готов к отладке веб-компонентов Lightning. Откройте файл .JS для веб-компонента Lightning (LWC). Добавьте несколько точек останова, щелкнув в левом поле вашего JS-файла строку для отладки.
Теперь в браузере нажмите кнопку или иным образом выполните действие, которое должно привести к точке останова. Как только точка останова будет достигнута, проверьте консоль отладчика для получения дополнительной полезной информации.
Вуаля! Отладка LWC непосредственно из кода Visual Studio. Это только верхушка айсберга. Если у вас есть какие-либо собственные советы или предложения или другие отзывы, пожалуйста, оставьте их в комментариях!
