Kotlin可以开发Android, IOS, JavaScript和后端，是不是很激动？一门语言统一世界有木有～ 今天就写一篇傻瓜式教程，让你轻松学会用Kotlin开发Web页面。
环境准备
- IntelliJ 2017.3.4 Ultimate Edition
- Kotlin 1.2.3
- Java 1.8
- macOS Sierra 10.12.6
创建工程
创建好以后的空项目目录是这样的：
build.gradle文件的内容如下：
buildscript {
ext.kotlin_version = '1.2.30'
repositories {
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
group 'com.jiang.yanghai'
version '1.0-SNAPSHOT'
apply plugin: 'java'
apply plugin: 'kotlin2js'
sourceCompatibility = 1.8
repositories {
mavenCentral()
}
dependencies {
compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
testCompile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
testCompile group: 'junit', name: 'junit', version: '4.12'
}
创建文件
创建包名com.jiang.yanghai，并创建Main.kt
package com.jiang.yanghai
fun main(args: Array) {
}
在resources目录下创建创建index.html，内容如下
Kotlin JavaScript Example
我们会用到kotlinx:kotlinx-html-js这个库，所以在build.gradle的dependency中加入
compile "org.jetbrains.kotlinx:kotlinx-html-js:0.6.9"
Tips:
使用默认配置，你不一定能够下载这个库，所以如果你遇到问题请将
mavenCentral()改为jcenter()另外我所用的环境会遇到依赖下载下来但是在编译的时候依然出现
can not find org.jetbrains.kotlinx:kotlinx-html-js:0.6.9的错误，在Project Structure中将对应的依赖库先删除然后再下载一次依赖，即可解决6.png
好啦，一切准备就绪，我们可以开始写代码咯！
编码
我们在Main.kt中加入一下代码
package com.jiang.yanghai
import kotlinx.html.*
import kotlinx.html.dom.create
import kotlinx.html.js.onClickFunction
import kotlin.browser.document
fun main(args: Array) {
// get the root tag of html file
var root = document.getElementById("root")
// create a div tag which contains a h1 tag and a button
var div = document.create.div {
h1() {
+ "Hello JavaScript"
}
button(classes = "btn") {
+ "Click Me!"
onClickFunction = { println("Clicked!!!")}
}
}
// add div tag to root
root!!.appendChild(div)
}
在resources目录下创建创建styles/main.css，内容如下：
.btn { // 这是为了告诉你如何显示的设置class
color: red;
}
h1 { // 隐式设置class
color: blue;
}
在build.gradle文件中加入以下内容
sourceSets.main {
kotlin.srcDirs += 'src/main/kotlin'
resources.srcDirs += 'src/main/resources'
}
编译
注意： 这里编译分为两种形式，第一种点击
Build > Build Project，第二种使用gradle build或者点击Gradle面板中的Tasks下面的build任务，我猜可能是目前Intellij对Kotlin支持方面的问题，这两种编译行为的结果是不太一样的。因此对应的index.html的写法也会稍微的有点不一样，这是因为我们要在index.html中去引用编译出来的js文件。
使用第一种方式编译，会在项目路径下生成out目录
要让页面正确展示，我们需要将index.html的内容写成这样：
Sample Default
// css文件
Hello World
// kotlin javascript标准库文件
// kotlinx-html 库文件
// Main.kt编译出来的 js 文件
好了，到这里你已经可以在浏览器打开index.html文件看看效果啦！大功告成！
点击按钮可以在console中看到打印出来的信息Clicked!!!
使用第二种方式编译会比较复杂一点，但能让我们能更好的控制编译过程和产出的产品目录，所以有必要掌握！
首先在build.gradle中加入以下内容
注意： 经过笔者的亲测，这里的
moduleKind只能选择umd，否则编译出来的js文件无法正常运行！
compileKotlin2Js {
kotlinOptions.outputFile = "${projectDir}/web/scripts/main.js"
kotlinOptions.moduleKind = "umd" //这里注意哦，一定是umd
kotlinOptions.sourceMap = true
}
build.doLast() {
// Copy kotlin.js and kotlin-meta.js from jar into web directory
configurations.compile.each { File file ->
copy {
includeEmptyDirs = false
from zipTree(file.absolutePath)
into "${projectDir}/web/lib"
include { fileTreeElement ->
def path = fileTreeElement.path
path.endsWith(".js") && (path.startsWith("META-INF/resources/") || !path.startsWith("META-INF/"))
}
}
}
// Copy resources to web directory
copy {
includeEmptyDirs = false
from new File("src/main/resources")
into "web"
}
}
接着我们需要修改index.html文件的内容如下
Sample Default
Hello World
这样编译出来的目录包含两部分，下半部分就可以作为最终的产品部署到服务器上！
打开浏览器试试吧！
后记
这篇文章中讲的是使用纯kotlin库开发web页面，其实目前JetBrains官方已经适配了React，kotlin-wrappers 就是github上的代码，并且还发布了一个工具包create-react-kotin-app，对于做前端开发的你，这名字是不是很眼熟？后续我会写一篇教程讲讲如何用Kotlin开发React应用。