将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

优秀的个人博客,低调大师

微信关注我们

原文链接:https://yq.aliyun.com/articles/459474

转载内容版权归作者及来源网站所有!

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

相关文章

发表评论

资源下载

更多资源
优质分享Android(本站安卓app)

优质分享Android(本站安卓app)

近一个月的开发和优化,本站点的第一个app全新上线。该app采用极致压缩,本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Eclipse(集成开发环境)

Eclipse(集成开发环境)

Eclipse 是一个开放源代码的、基于Java的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。幸运的是,Eclipse 附带了一个标准的插件集,包括Java开发工具(Java Development Kit,JDK)。

Java Development Kit(Java开发工具)

Java Development Kit(Java开发工具)

JDK是 Java 语言的软件开发工具包,主要用于移动设备、嵌入式设备上的java应用程序。JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具。

Sublime Text 一个代码编辑器

Sublime Text 一个代码编辑器

Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。