改进翻译

以 Gradle 入门 Kotlin 和 JavaScript

作者 Hadi Hariri，刘文俊（翻译）
最近更新 2016-11-04
本文介绍如何使用 Gradle 把 Kotlin 编译到 JavaScript

在本教程中，我们会学习如何

为了使用 Gradle 编译到 JavaScript，我们需要使用 kotlin2js 插件，而不是 kotlin 插件。

我们的 build.gradle 文件应该如下所示：

group 'org.example'
version '1.0-SNAPSHOT'

buildscript {
    ext.kotlin_version = '1.3.61'
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

apply plugin: 'kotlin2js'

repositories {
    mavenCentral()
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
}

如果要使用预览版（EAP, Early Access Preview），我们需要在 ext.kotlin_version 中指定其版本号，并且 在 buildscript 块中添加相应的仓库（预览版一般发布在 Bintray 上）

在编译时，Gradle 会生成我们应用程序的输出，默认位于 build/classes/main 目录下，这个路径可以使用编译器选项配置。

为了组装一个应用程序，我们还需要包含 Kotlin 标准库，即 kotlin.js，它作为依赖项包含在内，以及其他库（如果有的话）。

默认情况下，Gradle 不会在构建过程中解压 JAR 包，因此我们需要在构建中添加一个额外的步骤来执行此操作：

task assembleWeb(type: Sync) {
    configurations.compile.each { File file ->
        from(zipTree(file.absolutePath), {
            includeEmptyDirs = false
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") || 
                    !path.startsWith("META-INF/"))
            }
        })
    }
    from compileKotlin2Js.destinationDir
    into "${projectDir}/web"

    dependsOn classes
}

assemble.dependsOn assembleWeb

这个 task 会将运行时的依赖文件和编译输出一起复制到 web 目录。

有关生成的文件的更多信息和运行应用程序的说明，请参阅 Kotlin 转 JavaScript一节。

配置编译器选项

与使用 IntelliJ IDEA 构建系统或命令行类似，我们可以让编译器输出的 JavaScript 符合某个特定的模块系统的标准，例如 AMD、CommonJS 或 UMD。

要指定模块的类型，我们可以在插件中添加一条配置，如下所示：

compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/web/output.js"
    kotlinOptions.moduleKind = "amd"
    kotlinOptions.sourceMap = true
}

在这里，moduleKind 可以是：

  • plain（默认）
  • amd
  • commonjs
  • umd

关于不同类型模块输出的更多信息，请参阅使用模块一节。

我们还可以看到如何通过配置 sourceMap 选项，指示编译器是否为我们生成源码映射文件。