使用 Kotlin 开发前端应用(Webpack 示例)

去年的 Google IO 大会上,谷歌捧红了 Kotlin。据某网站预测,Kotlin 会在三四年之内取代 Java 一跃成为 Android 平台上的主要编程语言。Kotlin 原本是运行在 JVM 上的语言,在 Java 应用领域 Kotlin 的表现非常出色。但同时,近几年经过 JetBrains(JB - -!)的不断努力,Kotlin 现在可以支持多平台开发,不同平台之间甚至可以共享代码。

这里我想给大家演示一下如何使用 Kotlin 来写 Javascript 应用。

示例项目地址:7hens/js-example

这个示例项目是使用 webpack 来导入 kotlin。其实在官方教程里,是通过 gradle 来构建 KotlinJS 应用的,整个配置过程很简单,但这种方式每次写完 kotlin 代码之后都需要重新 build,我觉得太麻烦(可能是没找对方法),这里先不讲。

前期准备

先说说使用 Kotlin 之前需要做那些准备:

  1. 编写 Kotlin 代码的 IDE。推荐 WebStorm, IntelliJ IDEA,PhpStorm 等任意一款。
  2. NodeJs。前端开发必备。

在这里,我不推荐使用 VSCode、Sublime 来写 Kotlin 代码。因为 Kotlin 是强类型语言,可以依赖 IDE 的智能代码提示和代码检查等功能显著提高开发效率。作为 Kotlin 的亲粑粑,JB 家的 IDE 是开发 Kotlin 的不二之选。

配置项目

新建一个文件夹,当做项目根目录。在该目录下,依次敲入以下命令:

1
2
3
4
5
6
npm init -yes
npm i kotlin --save-dev
npm i webpack --save-dev
npm i webpack-dev-server --save-dev
npm i html-webpack-plugin --save-dev
npm i @jetbrains/kotlin-webpack-plugin --save-dev

这里我们创建了 package.json,并导入了 webpack 套件。如果你对 webpack 还不了解,请查看相关教程

接下来是 webpack 配置部分。在项目根目录新建配置文件 webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const KotlinWebpackPlugin = require('@jetbrains/kotlin-webpack-plugin');

module.exports = {
entry: "kotlinApp",
output: {
filename: "bundle.js",
path: __dirname + '/build',
},
devtool: "source-map",
resolve: {
extensions: ['.js', '.json', '.kt'],
modules: ['node_modules', 'kotlin_build']
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, '../kotlin_build'),
exclude: [/kotlin\.js$/],
use: ['source-map-loader'],
enforce: 'pre',
},
]
},
devServer: {
inline: true,
port: 8080
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
// 导入 Kotlin 插件
// { src: __dirname + '/src/kotlin' } 用来配置 kotiln 源代码的根目录
new KotlinWebpackPlugin({ src: __dirname + '/src/kotlin' }),
new HtmlWebpackPlugin()
]
};

Okay,配置好了,整个过程很简单吧?如果你觉得还是很繁琐,可以直接拷贝示例项目里的 package.jsonwepack.config.js

现在,让我们开始试着撸一发 Kotlin,并运行一下吧。

编写 Kotlin 并运行

在根目录下新建 src 文件夹,再在 src 里面新建 kotlin 文件夹,作为 kotlin 源码的根目录。

/src/kotlin 里新建 kotlin 源文件 main.kt,试着在里面撸一串 hello world 吧。

1
2
3
fun main(args: Array<String>) {
console.log("hello, world")
}

撸完了,我们试着运行一下。

在终端运行命令 webpack-dev-server,该命令用来运行一个本地服务器,并实现代码热更新(每次保存 kotlin 代码都会自动触发编译,并会重新刷新页面)。

打开浏览器并访问 localhost:8080,看看 hello, world 是否已经在控制台里显示出来了?