Начало работы с Kotlin/Wasm в IntelliJ IDEA

Этот учебник демонстрирует, как использовать IntelliJ IDEA для создания приложения Kotlin/Wasm.

Для начала установите последнюю версию IntelliJ IDEA. Учебник применим как к IntelliJ IDEA Community Edition, так и к Ultimate Edition.

Включение экспериментального мастера Kotlin/Wasm в IntelliJ IDEA

Нажмите дважды Shift, чтобы открыть поиск, введите Registry.
Выберите Registry из списка. Откроется окно Registry.
Найдите в списке параметр реестра kotlin.wasm.wizard, и включите его.
Перезапустите IntelliJ IDEA.

Создание нового проекта Kotlin/Wasm

В IntelliJ IDEA выберите File | New | Project.
В левой панели выберите Kotlin Multiplatform.
Введите имя проекта, выберите Приложение для браузера с Kotlin/Wasm в качестве шаблона проекта и нажмите Далее.

По умолчанию ваш проект будет использовать Gradle с Kotlin DSL в качестве системы сборки.
Примите значения по умолчанию на следующей странице и нажмите Готово. Ваш проект откроется.

По умолчанию мастер создает необходимый Simple.kt файл.
Откройте build.gradle.kts файл и убедитесь, что версия плагина Kotlin Multiplatform установлена на 1.8.20:
```
plugins {
    kotlin("multiplatform") version "1.8.20"
}
```

Сборка и запуск приложения

Нажмите Собрать проект рядом с конфигурацией запуска в верхней части экрана:
Запустите приложение, нажав Запуск рядом с конфигурацией запуска в верхней части экрана.
После запуска приложения откройте в браузере следующий URL:
```
http://localhost:8080
```
Вы должны увидеть вкладку "JS Client" в вашем браузере:

Если вы откроете исходный код страницы, вы найдете имя JavaScript-пакета:

Устранение неполадок

Несмотря на то, что большинство браузеров поддерживают WebAssembly, вам необходимо обновить настройки в вашем браузере.

Для запуска проекта Kotlin/Wasm необходимо обновить настройки целевой среды:

Для версии 109:

Запустите приложение с аргументом командной строки --js-flags=--experimental-wasm-gc.
Для версии 110 или более поздней:
1. Перейдите к chrome://flags/#enable-webassembly-garbage-collection в вашем браузере.
2. Включите Сборку мусора WebAssembly.
3. Перезапустите ваш браузер.

Для версии 109 или более поздней:

Перейдите к about:config в вашем браузере.
Включите javascript.options.wasm_function_references и javascript.options.wasm_gc параметры.
Перезапустите ваш браузер.

Для версии 109 или более поздней:

Запустите приложение с аргументом командной строки --js-flags=--experimental-wasm-gc.

Обновление вашего приложения

Откройте Simple.kt и обновите код:

import kotlinx.browser.document
import kotlinx.dom.appendText

fun main() {
    println("Hello, ${greet()}")
    document.body!!.appendText("Hello, you're using Kotlin/Wasm!")
}

fun greet() = "world"

Запустите приложение, нажав Запуск рядом с конфигурацией запуска в верхней части экрана.
После запуска приложения откройте в браузере следующий URL:

http://localhost:8080

Вы увидите текст "Привет, вы используете Kotlin/Wasm!":

Что дальше?

Изучите взаимодействие Kotlin/Wasm с JavaScript

Последнее изменение: 16 июня 2023

© 2010–2023 JetBrains s.r.o. and Kotlin Programming Language contributors
Licensed under the Apache License, Version 2.0.
https://kotlinlang.org/docs/wasm-get-started.html