闲聊群 : 668524118
本群主要用于编程技术 ,及创意作品 ,思维架构的交流 ,欢迎喜欢创新 ,热爱生活的朋友加入 !
这篇文章说明了如何将 Kotlin 代码编译成 Javascript 代码，并提供一些简单的示例参考。
Kotlin 编译到 Javascript 有多重方式，比较推荐的做法是使用 Gradle，你也可以通过Intellij IDEA 或 Maven 直接编译为 Javascript 项目。也可以直接通过命令行来手动编译。下面这些教程可以帮助你更好的学习如何编译 Kotlin 到 JavaScript。
Gradle 编译入门教程 Intellij IDEA 编译入门教程 Maven 编译入门教程 命令行编译入门教程编译输出代码说明
将 Kotlin 代码编译为 Javascript 代码后会得到两个主要的文件:
- Kotlin.js. 运行时和标准库。这部分代码只与 Kotlin 的版本有关而不会因为不同的应用而有所不同。
- {module}.js。真正的应用代码。所有的应用代码最终都会编译成一个 JavaScript 文件并与模块的名字同名。
除此之外，每一个源码文件都会有一个关联的 {file}.meta.js 元文件，该文件可用来做反射或是其他的功能。
以上述说明为参考，如果我们具有如下的代码(模块名为 ConsoleOutput)
fun main(args: Array<String>) {
println("Hello JavaScript!")
}
Kotlin 编译器将会输出如下代码：
我们最为关注的是 ConsoleOutput.js
var ConsoleOutput = function (Kotlin) {
'use strict';
var _ = Kotlin.defineRootPackage(null, /** @lends _ */ {
main_kand9s$: function (args) {
Kotlin.println('Hello JavaScript!');
}
});
Kotlin.defineModule('ConsoleOutput', _);
_.main_kand9s$([]);
return _;
}(kotlin);
如上代码就是 kotlin main 函数编译后得到的代码，我们可以看到编译后的代码定义了一个函数并赋值给了一个与模块名同名的变量，然后通过传入的 Kotlin 变量来调用 define
rootPackage
函数。通过 Kotlin 变量我们可以使用 kotlin.js 标准库中的方法。
编译前的代码只有一个 main 函数，编译之后该函数被添加了后缀，这么做的目的主要是为了防止重载 Kotlin 中的代码，Kotlin 中的这部分功能是为了将源码转换成对应的 javascript 代码。
最后定义为一个立即执行函数，当这部分代码加载之后就会立即执行，并将 Kotlin 做为参数传进去，这样就可以使用 Kotlin.js 中定义的方法了。
运行编译后的代码
这部分代码的目的是为了通过 console 输出文本，在这里我们需要通过 HTML 页面加载并在浏览器中运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Console Output</title>
</head>
<body>
<script type="text/javascript" src="out/production/ConsoleOutput/lib/kotlin.js"></script>
<script type="text/javascript" src="out/production/ConsoleOutput/ConsoleOutput.js"></script>
</body>
</html>
注：我们需要先加载 kotlin.js 文件，再加载我们的应用文件。
如下为运行的输出结果：
总结
我们可以看到，Kotlin 的目标是得到准确可读的 Javascript 代码以便于我们阅读和更改。那么我们做了这么多工作只得到了 console.log 的功能，为什么呢？这里只是一个简单的展示例子，随着应用的复杂，我们会发现 Kotlin 代码会更加的优雅，也能从 Kotlin 的静态类型中获益。
3273
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
