改进翻译

Setting up a Kotlin/JS project

最近更新 2020-02-23
How to set up a Gradle project targeting JavaScript using the JS or multiplatform plugins.

There are two major ways how we can set up a Kotlin/JS project: we can use the Kotlin/JS Gradle plugin, or use the Kotlin Multiplatform Gradle plugin.

Setting up for JavaScript (Gradle)

The most straightforward way to get started with Kotlin/JS is via the Kotlin/JS Gradle plugin. If you're using IntelliJ IDEA, the setup for such a project can be done via wizard.

Through the New Project wizard, we can select the platform we want to target. For this example, we're selecting Kotlin/JS for browser, which allows us to use browser-specific APIs in our project. If we're targeting Node.js instead, we can select the Kotlin/JS for Node.js option instead.

Make sure that the Kotlin DSL build script option is selected to use the Gradle Kotlin DSL as well:

New JavaScript project wizard

After selecting a project name, such as jsTutorial, IntelliJ IDEA will automatically start creating the folder structure for your Gradle project. To see and adjust the default build configuration, we can open the build.gradle.kts in the root of our application:

plugins {
    id("org.jetbrains.kotlin.js") version "1.3.70"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    implementation(kotlin("stdlib-js"))
}

kotlin.target.browser { }

As we can see, the kotlin.js Gradle plugin is used to provide JavaScript support for our project. The plugin also takes care of managing a development environment for us – under the hood, it manages its own yarn and webpack installation, and exposes their functionality through the Gradle DSL.

The kotlin.target.browser part at the bottom of the file can be used for target-specific configurations. This part becomes relevant when adjusting the behavior of the JS plugin, for example to configure the available test runners for the platform.

To learn about how to run your program, both in the browser and on the Node.js target, check out Running Kotlin/JS.

Setting up using the Kotlin Multiplatform plugin

When targeting other platforms alongside JavaScript, the Multiplatform plugin can be used instead of the JS plugin. An empty template for such a project can be created through the wizard in IntelliJ IDEA:

Multiplatform project wizard

After creating a multiplatform plugin with the wizard, any kind of platform-specific configuration is at first omitted. To add the JavaScript target, we adjust our automatically generated build.gradle.kts file to look analog to this:

plugins {
    kotlin("multiplatform") version "1.3.70"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

kotlin {
    js {
        browser { }
    }

    sourceSets {
        val commonMain by getting {
            dependencies {
                implementation(kotlin("stdlib-common"))
            }
        }
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test-common"))
                implementation(kotlin("test-annotations-common"))
            }
        }

        val jsMain by getting {
            dependencies {
                implementation(kotlin("stdlib-js"))
            }
        }

        val jsTest by getting {
            dependencies {
                implementation(kotlin("test-js"))
            }
        }
    }
}