改进翻译

以 IntelliJ IDEA 入门 Kotlin 和 JavaScript

作者 Hadi Hariri,刘文俊(翻译)
最近更新 2016-09-30
本文介绍如何使用 IntelliJ IDEA 把 Kotlin 编译到 JavaScript

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

创建编译到 JavaScript 的应用程序

在创建面向 JavaScript 的新应用程序或模块时,我们需要选择 Kotlin - JavaScript 作为编译目标:

First Step of Wizard

下一步会提示我们选择 Kotlin 运行时库。默认情况下,插件会选择与当前安装版本关联的 Kotlin 库。如果我们不需要修改,在输入项目名称和保存位置后点击 Finish 即可。

Selecting Runtime

当 IDE 完成项目创建之后,我们会看到这样的目录结构:

Project Structure

此时我们可以开始编写 Kotlin 代码了。在这个示例中,我们会编写一些代码,将字符串输出到控制台窗口中。

fun main(args: Array<String>) {
    val message = "Hello JavaScript!"
    println(message)
}

我们现在需要一个 HTML 页面来加载代码,因此我们将创建一个名为 index.html 的文件。如果你想了解 Kotlin 是如何编译到 JavaScript 以及关于输出文件的更多信息,请查看 Kotlin 转 JavaScript 教程。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Console Output</title>
    </head>
    <body>
        <script type="text/javascript" src="out/production/sampleapp/lib/kotlin.js"></script>
        <script type="text/javascript" src="out/production/sampleapp/sampleapp.js"></script>
    </body>
</html>

几个要点:

  • 应该先加载 kotlin.js 文件,因为我们的程序会使用到它。
  • 路径指向的是 IntelliJ IDEA 在编译程序时使用的默认输出位置,下面我们会看到如何修改它。

接下来要做的就是编译我们的程序(通过 Build|Build Project 菜单),当 JavaScript 文件生成完之后,我们就可以在浏览器中打开 index.html 文件,并在控制台调试窗口中查看结果。

调试程序

此功能仅在旗舰版中支持。

为了使用 IntelliJ IDEA 调试应用程序,我们需要执行两个步骤:

  1. 安装 JetBrains Chrome 插件以支持通过 Chrome 在 IntelliJ IDEA 中进行调试。这个插件对于使用 IntelliJ IDEA 开发的任意类型的 Web 应用程序都有用,而不仅仅是 Kotlin。

  2. 配置 Kotlin 编译器,生成源码映射文件(source map),配置项可通过 Preferences|Kotlin Compiler 找到。

SourceMaps

完成后,我们只需右键单击 index.html 文件并选择 Debug 选项。这将启动 Chrome,然后代码会停在 IntelliJ IDEA 我们的代码中定义的断点处,在这里我们可以对表达式进行求值,单步执行代码等。

Debugger

你也可以使用标准的 Chrome 调试器调试 Kotlin 应用程序,只需要确保你已经生成了源码映射文件。

配置编译器选项

Kotlin 提供了一系列的编译器选项,它们也可以在 IntelliJ IDEA 中进行配置。除了刚刚介绍过的生成源码映射文件的选项,我们还可以设置如下属性:

  • 输出文件前缀:我们可以在编译器生成的输出文件前加上额外的 JavaScript 代码,为此,我们需要使用此选项指明我们想要包含的 JavaScript 文件的名称。
  • 输出文件后缀:与上面相同,但是这个选项会把指定文件的内容附加到编译器输出的代码后面。
  • 复制运行时库文件:指定我们希望将 kotlin.js 库输出到哪个子文件夹,默认情况下它是 lib,这就是为什么我们会在 HTML 中引用这个路径的原因。
  • 模块类型:指定我们要遵循的模块标准,这将在使用模块教程中进行更深入的介绍。

小节

在本教程中,我们已经了解了如何创建编译到 JavaScript 的 Kotlin 应用程序,调试它以及设置编译器选项。 在接下来的其他教程中,我们将介绍更深入的主题,例如与DOM交互等。