将Kotlin代码编译成Javascript 代码

简介:

在Kotlin和Javascript平台的互操作过程中,往往会涉及Kotlin代码和 Javascript 代码相互转换的过程,本文主要介绍如何将Kotlin代码编译成Javascript 代码。

1,创建JavaScript的应用程序

首先创建一个新的应用程序或目标JavaScript模块时,并需要选择Kotlin - JavaScript作为编译运行目标。
这里写图片描述

默认情况下,插件选择与当前安装版本关联的插件。除非我们要创建一个不同的项目,否则我们可以在输入项目名称和位置后点击Finish。
这里写图片描述

项目创建完成后,项目结构如下图所示:

这里写图片描述

2,新建项目

接下来,可以开始编写Kotlin代码。例如:

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

现在需要一个HTML页面来加载代码,所以我们创建一个名为index.html的文件。

编译输出代码说明

将 Kotlin 代码编译为 Javascript 代码后会得到两个主要的文件:

  • Kotlin.js. :运行时和标准库,这部分代码只与 Kotlin 的版本有关而不会因为不同的应用而有所不同。
  • {module}.js:真正的应用代码,所有的应用代码最终都会编译成一个 JavaScript 文件并与模块的名字同名。

除此之外,每一个源码文件都会有一个关联的 {file}.meta.js 元文件,该文件可用来做反射或是其他的功能。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 文件,再加载我们的应用文件。

这里写图片描述

调试应用程序

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

  • 安装JetBrains Chrome扩展,它允许通过Chrome在IntelliJ IDEA中进行调试。这对于用IntelliJ IDEA开发的任何类型的Web应用程序都很有用,而不仅仅是Kotlin;
  • 配置Kotlin编译器生成源地图,可通过 Preferences|Kotlin Compiler。
    这里写图片描述

一旦完成,我们只需右键单击我们的index.html文件,然后选择调试选项。这将启动Chrome,然后在IntelliJ IDEA中的代码中定义的断点处停止,我们可以在其中评估表达式,逐步执行代码等。

这里写图片描述

这里写图片描述

也可以使用标准的Chrome调试器来调试Kotlin应用程序,只要确保你生成源地图。

配置编译器选项

Kotlin提供了一系列可在IntelliJ IDEA中访问的编译器选项。常见的如下:

  • 输出文件前缀。我们可以在编译器生成的输出前加上额外的JavaScript。为了做到这一点,我们在这个框中指出了包含我们想要的JavaScript的文件的名字。
  • 输出文件后缀。同上,但在这种情况下,编译器会将所选文件的内容追加到输出中。
  • 复制运行时库文件。指示我们希望将该kotlin.js库输出到哪个子文件夹中。默认情况下,lib这就是为什么在HTML中我们引用这个路径。
  • 模块种类。指示要遵循的模块标准。这在“ 使用模块”教程中有更深入的介绍。

附:http://kotlinlang.org/docs/tutorials/javascript/getting-started-idea/getting-started-with-intellij-idea.html

目录
相关文章
|
29天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
117 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
30天前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码,集成网站AI语音助手
根据本教程,只需通过白屏化的界面操作,即可快速构建一个专属的AI智能体。
|
2月前
|
JavaScript 前端开发 测试技术
在 golang 中执行 javascript 代码的方案详解
本文介绍了在 Golang 中执行 JavaScript 代码的四种方法:使用 `otto` 和 `goja` 嵌入式 JavaScript 引擎、通过 `os/exec` 调用 Node.js 外部进程以及使用 WebView 嵌入浏览器。每种方法都有其适用场景,如嵌入简单脚本、运行复杂 Node.js 脚本或在桌面应用中显示 Web 内容。
141 15
在 golang 中执行 javascript 代码的方案详解
|
3月前
|
JavaScript
原生js炫酷随机抽奖中奖效果代码
原生js随机抽奖是一个炫酷的根据数据随机抽奖的代码,该网页可进行随机抽取一个数据,页面动画高科技、炫酷感觉的随机抽奖效果,简单好用,欢迎下载!
83 3
|
3月前
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例
|
JavaScript 前端开发 Kotlin
第14章 使用Kotlin开发JavaScript代码 《Kotin 编程思想·实战》
第14章 使用Kotlin开发JavaScript代码 14.1 Kotlin代码编译成js过程 14.2 使用Kotlin开发JavaScript代码
1009 0
|
Web App开发 JavaScript 前端开发
《Kotlin 程序设计》第十三章 使用Kotlin开发JavaScript代码
第十三章 使用Kotlin开发JavaScript代码 正式上架:《Kotlin极简教程》Official on shelves: Kotlin Programming minimalist tutorial 京东JD:https://item.jd.com/12181725.html 天猫Tmall:https://detail.tmall.com/item.htm?id=558540170670 一切皆是映射。
1223 0
|
4月前
|
JSON 调度 数据库
Android面试之5个Kotlin深度面试题:协程、密封类和高阶函数
本文首发于公众号“AntDream”,欢迎微信搜索“AntDream”或扫描文章底部二维码关注,和我一起每天进步一点点。文章详细解析了Kotlin中的协程、扩展函数、高阶函数、密封类及`inline`和`reified`关键字在Android开发中的应用,帮助读者更好地理解和使用这些特性。
68 1

热门文章

最新文章