试试 Kotlin JavaScript!

2 年 ago

文, 翔

2 minutes

Kotlin（科特林）和JavaScript（杰克斯克里普特）是什么？

Kotlin的JavaScript编译器可以实现以下三个功能，我们都知道Kotlin可以编译为Java的class文件从而在JVM上运行，但是也可以编译为JavaScript代码！目前可以编译为ECMAScript5.1的代码，但未来似乎也可以编译为ECMAScript2015的代码。

標準ライブラリの使用

需要注意的是，并不是使用的JDK或Java等所有代码都会被编译。例如，即使编译了使用SpringFramework的Kotlin代码，SpringFramework也不会被编译成JavaScript。这样的不支持模块在编译时会被忽略。

在Kotlin的JavaScript编译中，可以在以下情况下使用。

DOM要素の操作
WebGLの操作

サーバーサイド JavaScript

Node.jsといったサーバーサイド技術使用

在客户端，可以同时使用jQuery和React等库。这非常棒。在这种情况下，可以从TypeScript的类型定义信息中获取类型信息。由于TypeScript的类型定义信息无法直接在Kotlin中使用，因此需要使用一个名为dukat的工具。

据说在负责开发和维护Kotlin的JetBrains公司，也参与了React的工具开发和维护工作。通过使用Create React Kotlin App工具，现在可以轻松地一瞬间创建React的Kotlin版本。然而，值得注意的是，在撰写本文时，该工具仍处于早期预览版阶段。

将Kotlin转换为JavaScript

将Kotlin转换成JavaScript会生成两种文件。

ランタイムと標準ライブラリを含むファイル

{module}.js

アプリケーションコードが含まれるファイル。アプリケーションコードは一つのファイルに集約され、{module}にはKotlinのモジュール名が使われる。

如果你对转换后的输出文件的内容讲解感兴趣，可以尝试阅读官方文档，我认为会很有趣。如果有时间的话，想详细了解转换的具体过程。

有四种方法可以提高转换的效果。

Command Line

我想在这里通过使用IntelliJ创建项目并选择Gradle来实际转换。在创建时，我选择了Kotlin/JS for Node.js。生成的文件和目录在这里。

.
├── build.gradle
├── gradle
│   └── wrapper
├── gradle.properties
├── gradlew
├── gradlew.bat
├── settings.gradle
└── src
    ├── main
    └── test

build.gradle的配置如下。通过插件将Kotlin转换为JavaScript。在依赖库中还使用了一个名为stdlib-js的库。

plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.50'
}

group 'com.bookstore'
version '1.0-SNAPSHOT'

repositories {
    mavenCentral()
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

kotlin.target.nodejs { }

为了确认操作，我定义了一个主要函数以输出”Hello, Javascript!”。

fun main() {
    println("Hello, JavaScript!")
}

在这里执行构建时，编译结果将生成在build目录中。似乎应用程序的代码将输出到build/js/packages，而运行时和标准库的代码将输出到build/js/package-imported。

build/js/packages
├── example
│   ├── kotlin
│   │   ├── example
│   │   │   └── root-package.kjsm
│   │   ├── example.js
│   │   ├── example.js.map
│   │   └── example.meta.js
│   ├── package.json
│   └── package.json.hash
└── example-test
    ├── package.json
    └── package.json.hash

build/js/packages_imported
├── kotlin
│   └── 1.3.50
│       ├── kotlin.js
│       ├── kotlin.js.map
│       └── package.json
├── kotlin-test
│   └── 1.3.50
│       ├── kotlin-test.js
│       ├── kotlin-test.js.map
│       └── package.json
└── kotlin-test-nodejs-runner
    └── 1.3.50
        ├── kotlin-nodejs-source-map-support.js
        ├── kotlin-nodejs-source-map-support.js.map
        ├── kotlin-test-nodejs-runner.js
        ├── kotlin-test-nodejs-runner.js.map
        └── package.json

我实际上试着调用了一下。

> node -v
v12.13.0

> node build/js/packages/example/kotlin/example.js
Hello, JavaScript!

这个示例代码很好地输出到了控制台。除了这个示例代码之外，我尝试定义了其他类，并且它们都成功地被转换为了可以在JavaScript中执行的Kotlin代码。真是太棒了！

下一个是…

我已经找到了将Kotlin代码转换为JavaScript的方法！下一步，我想尝试使用库的方法以及从Kotlin调用JavaScript和从JavaScript调用Kotlin的方法。

可以考虑

Kotlin官方参考文档 | Kotlin 转换至 JavaScript

最新更新记录

Kotlin（科特林）和JavaScript（杰克斯克里普特）是什么？

将Kotlin转换为JavaScript

下一个是…

可以考虑