在 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.

在 IntelliJ IDEA 中入门 Kotlin/Wasm - 图1

This tutorial demonstrates how to work with a Kotlin/Wasm application in IntelliJ IDEA.

Before you start

  1. Download and install the latest version of IntelliJ IDEA.

  2. Clone the Kotlin/Wasm examples repository by selecting File | New | Project from Version Control in IntelliJ IDEA.

    You can also clone it from the command line:

    1. git clone [email protected]:Kotlin/kotlin-wasm-examples.git

Run the application

  1. Open the Gradle tool window: View | Tool Windows | Gradle.

  2. In the kotlin-wasm-browser-example | Tasks | kotlin browser, select and run the wasmJsBrowserRun task.

    Run the Gradle task

    Alternatively, you can run the following command in Terminal from the project directory:

    1. ./gradlew wasmJsBrowserRun -t

  3. Once the application starts, open the following URL in your browser:

    1. http://localhost:8080/

    You should see “Hello, World!” text:

    Run the Kotlin/Wasm application

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:

    1. Go to chrome://flags/#enable-webassembly-garbage-collection in your browser.
    2. Enable WebAssembly Garbage Collection.
    3. Relaunch your browser.

【Firefox】

For version 109 or later:

  1. Go to about:config in your browser.
  2. Enable javascript.options.wasm_function_references and javascript.options.wasm_gc options.
  3. 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

  1. Open Simple.kt and update the code:

    1. import kotlinx.browser.document
    2. import kotlinx.browser.window
    3. import kotlinx.dom.appendElement
    4. import kotlinx.dom.appendText
    6. fun main() {
    7.     document.body?.appendText("Hello, ${greet()}!")
    9.     document.body?.appendElement("button") {
    10.         this.textContent = "Click me, I'm a button!"
    11.         addEventListener("click") {
    12.             window.setTimeout({
    13.                 window.alert("👋")
    14.                 null
    15.             }, 1000)
    16.         }
    17.     }
    18. }
    20. fun greet() = "world"

    This code adds a button to the document and an action.

  2. Run the application again. Once the application starts, open the following URL in your browser:

    1. http://localhost:8080

    You should see the “Hello, World” text within the button:

    Run Kotlin/Wasm application in browser

  3. Click the button to see the alert message:

    Alert action

Now you can work with Kotlin/Wasm code that runs in the browser!

下一步做什么？

Try out other Kotlin/Wasm examples from the kotlin-wasm-examples repository: