在 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

  1. fun main() {

  2. document.body?.appendText("Hello, ${greet()}!")

  3. document.body?.appendElement("button") {

  4. this.textContent = "Click me, I'm a button!"
  5. addEventListener("click") {
  6. window.setTimeout({
  7. window.alert("👋")
  8. null
  9. }, 1000)
  10. }
  11. }

  12. }

  13. 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: