在 IntelliJ IDEA 中入门 Kotlin/Wasm
Kotlin/Wasm is an Experimental feature. It may be dropped or changed at any time. It is available only starting with Kotlin 1.8.20.
This tutorial demonstrates how to use IntelliJ IDEA for creating a Kotlin/Wasm application.
To get started, install the latest version of IntelliJ IDEA. The tutorial is applicable to both IntelliJ IDEA Community Edition and the Ultimate Edition.
Enable an experimental Kotlin/Wasm Wizard in IntelliJ IDEA
Press double Shift to open a search, enter Registry.
Select Registry from the list. Registry window opens.
Find the
kotlin.wasm.wizard
registry key in the list, and enable it.Restart IntelliJ IDEA.
Create a new Kotlin/Wasm project
- In IntelliJ IDEA, select File | New | Project.
- In the panel on the left, select Kotlin Multiplatform.
Enter a project name, select Browser Application with Kotlin/Wasm as the project template, and click Next.
By default, your project will use Gradle with Kotlin DSL as the build system.
Accept the default configuration on the next screen and click Finish. Your project will open.
By default, the wizard creates the necessary
Simple.kt
file.Open the
build.gradle.kts
file and ensure that the Kotlin Multiplatform plugin version is set to1.8.20
:plugins { kotlin("multiplatform") version "1.8.20" }
Build and run the application
Click Build Project next to the run configuration at the top of the screen:
Run the application by clicking Run next to the run configuration at the top of the screen.
Once the application starts, open the following URL in your browser:
http://localhost:8080
You should see the "JS Client" tab in your browser:
If you open a page source, you'll find the name of the JavaScript bundle:
Troubleshooting
Despite the fact that most of the browsers support WebAssembly, you need to update the settings in your browser.
To run a Kotlin/Wasm project, you need to update the settings of the target environment:
【Chrome】
For version 109:
Run the application with the
--js-flags=--experimental-wasm-gc
command line argument.For version 110 or later:
- Go to
chrome://flags/#enable-webassembly-garbage-collection
in your browser. - Enable WebAssembly Garbage Collection.
- Relaunch your browser.
- Go to
【Firefox】
For version 109 or later:
- Go to
about:config
in your browser. - Enable
javascript.options.wasm_function_references
andjavascript.options.wasm_gc
options. - Relaunch your browser.
【Edge】
For version 109 or later:
Run the application with the --js-flags=--experimental-wasm-gc
command line argument.
Update your application
Open
Simple.kt
and update the code: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"
Run the application by clicking Run next to the run configuration at the top of the screen.
Once the application starts, open the following URL in your browser:
http://localhost:8080
You'll see the text "Hello, you're using Kotlin/Wasm!":