将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

目录
相关文章
|
18天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
1月前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
30 0
|
1月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
12 0
|
1月前
|
JSON 前端开发 JavaScript
16个重要的JavaScript代码
16个重要的JavaScript代码
32 1
|
1月前
|
JavaScript
当当网新用户注册界面——JS代码
当当网新用户注册界面——JS代码
7 0
|
1月前
|
JavaScript
当当网首页——JS代码
当当网首页——JS代码
11 1
|
1月前
|
JavaScript Java
什么?java中居然可以执行js代码了?真是不知者不怪
什么?java中居然可以执行js代码了?真是不知者不怪
13 1
|
1月前
|
JavaScript 前端开发 Python
生成X-Bogus的js代码,通过python调用生成
该文本是一个关于如何解析和执行JavaScript代码的步骤说明。主要内容包括: 1. 找到JavaScript文件的位置。 2. 下载代码并进行格式化。 3. 运行代码时会出现缺少变量错误,需要添加模拟环境的代码。 4. 指出主要的入口函数是`_0x5a8f25`,将其赋值给`window`。 5. 提供了整个JavaScript代码的长串内容。 6. 提供了一个Python脚本,用于调用这个JavaScript函数并处理返回的数据。 总结:这段文本描述了如何处理和运行一个JavaScript文件,以及使用Python来与这个脚本交互的示例。
|
1月前
|
存储 JavaScript 编译器
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!
这款国产中文编程火了!通过文言文编译生成Python、JS、Ruby代码!
|
1月前
|
JavaScript 前端开发
JS获取DOM元素的八种方法(含代码,简单易懂)
JS获取DOM元素的八种方法(含代码,简单易懂)