Веб-компоненты Salesforce Lightning

Веб-компоненты Lightning — это новая модель программирования для создания компонентов Lightning. Он использует достижения веб-стандартов последних пяти лет, может сосуществовать и взаимодействовать с оригинальной моделью программирования Aura и обеспечивает непревзойденную производительность.

Шаг 1

Настройка среды Salesforce DX

Включить Dev Hub в предварительной версии Developer Edition

Если у вас нет предварительной версии организации, подпишитесь на предварительную версию Developer Edition по адресу https://www.salesforce.com/form/signup/prerelease-spring19/.
Войдите в качестве системного администратора в свою предварительную версию Developer Edition.
Нажмите

и выберите Настройка.

4. В меню «Настройка» введите Dev Hub в поле «Быстрый поиск» и выберите Центр разработки.

5. Чтобы включить Dev Hub, нажмите Включить.

Установите предварительную версию интерфейса командной строки Salesforce (CLI)

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

Загрузите CLI, используя соответствующую ссылку ниже.
macOS
https://sfdc.co/sfdx_cli_osx
32-разрядная версия Windows
https://sfdc.co/ sfdx_cli_win
Windows 64-bit
https://sfdc.co/sfdx_cli_win64
Debian/Ubuntu 64
https://sfdc.co/sfdx_cli_linux
/> Загрузите архив по одному из URL-адресов в манифесте, распакуйте архив, затем запустите сценарий ./install.
Debian/Ubuntu x86
https://sfdc.co/sfdx_cli_linux_x86 < br /> Загрузите архив по одному из URL-адресов в манифесте, распакуйте архив и запустите сценарий ./install.
Установите CLI через установщик.
Подтвердите, что вы правильно установили CLI, выполнив эту команду: sfdx plugins. Строка salesforcedx сообщает вам, какую версию вы установили.
Обновите до предварительной версии CLI, выполнив эту команду: sfdx plugins:install salesforcedx@pre-release
После установки предварительной версии подтвердите, что у вас есть предварительная версия, запустив sfdx plugins. Ваш номер для плагина salesforcedx должен быть не меньше 45.0.9. Вы должны увидеть что-то вроде:

Шаг 2

Настройка кода Visual Studio

Установка расширений Salesforce для Visual Studio Code

Visual Studio Code — это редактор кода для разработчиков Salesforce. Он бесплатный, с открытым исходным кодом и доступен для Windows, Linux и macOS. Этот редактор имеет простые в установке расширения для подсветки синтаксиса, завершения кода и многого другого.

Для этого быстрого старта мы собираемся установить Visual Studio Code и рекомендуемый пакет расширения Salesforce Extension Pack и расширение Lightning Web Components.

Загрузите и установите последнюю версию Visual Studio Code для вашей операционной системы. Если у вас уже установлен Visual Studio Code, переустанавливать его не нужно.
Запустите код Visual Studio.
На левой панели инструментов нажмите кнопку

Значок расширения.

4. Найдите пакет расширения Salesforce и нажмите Установить. Если он у вас уже установлен, вам просто нужно нажать на кнопку Перезагрузить.

5. Найдите веб-компоненты Lightning и нажмите Установить. Если он у вас уже установлен, вам просто нужно нажать на кнопку Перезагрузить.

6. Перезапустите Visual Studio Code, чтобы завершить установку.

Шаг 3

Создание веб-компонента Hello World Lightning

Создание проекта Salesforce DX

В коде Visual Studio нажмите Command + Shift + P на Mac или Ctrl + Shift + P на Windows.
Введите SFDX.
Выберите SFDX: создать проект.
Введите HelloWorldLightningWebComponent в качестве имени проекта.
Нажмите Ввод.
Выберите папку для сохранения проекта.
Нажмите Создать проект. Вы должны увидеть что-то вроде этого в качестве базовой настройки.

Авторизация Центра разработки

В Visual Studio Code нажмите Command + Shift + P на Mac или Ctrl + Shift + P на Windows.
Введите SFDX.
Выберите SFDX: авторизовать Dev Hub.
Войдите в систему, используя учетные данные предварительной версии Dev Hub.
Нажмите Разрешить.

6. После аутентификации в браузере интерфейс командной строки запоминает ваши учетные данные Dev Hub. Сообщение об успехе должно выглядеть так:

Создание рабочей организации

В Visual Studio Code нажмите Command + Shift + P на Mac или Ctrl + Shift + P на Windows.
Введите SFDX.
Выберите SFDX: создать вспомогательную организацию по умолчанию.
Нажмите Enter, чтобы принять значение по умолчанию project-scratch-def.json.
Нажмите Enter, чтобы принять псевдоним организации по умолчанию HelloWorldLightningWebComponent.
Будьте терпеливы, создание временной организации может занять минуту. Сообщение об успехе должно выглядеть так:

Создание веб-компонента Lightning

В коде Visual Studio нажмите Command + Shift + P на Mac или Ctrl + Shift + P на Windows.
Введите SFDX.
Выберите SFDX: создать веб-компонент Lightning.
Нажмите Enter, чтобы принять значение по умолчанию force-app/main/default/lwc.
Введите helloWorld в качестве имени нового компонента.
Нажмите Ввод.
Просмотрите вновь созданные файлы в Visual Studio Code.

8. В HTML-файл helloWorld.html скопируйте и вставьте следующий код.

9. Сохраните файл.

10. В файле JavaScript helloWorld.js скопируйте и вставьте следующий код.

11. Сохраните файл.

12. В XML-файл helloWorld.js-meta.xml скопируйте и вставьте следующий код.

13. Сохраните файл.

Отправить в новую организацию

В Visual Studio Code нажмите Command + Shift + P на Mac или Ctrl + Shift + P на Windows.
Введите SFDX.
Выберите SFDX: передать исходный код в вспомогательную организацию по умолчанию.

Добавить компонент в приложение в Lightning Experience

В Visual Studio Code нажмите Command + Shift + P на Mac или Ctrl + Shift + P на Windows.
Введите SFDX.
Выберите SFDX: открыть организацию по умолчанию.
Щелкните значок запуска приложений