Kotlin2JS with Node.js

ด้วยกระแส Kotlin ร้อนแรงและการเขียน JS นั้นก็แอบปวดหัว จึงต้องหาพลังงานทางเลือก

วันนี้เราจะมาลองทำ KotlinJS กับ Node.js กัน

ไม่พูดพร่ำทำเพลง เริ่มเลย

New project!!!

การสร้าง project สามารถทำได้หลายแบบคือแบบผ่านตัว IntelliJ IDEA หรือผ่านทาง dependencies management อย่าง Maven หรือ Gradle

สำหรับตัวอย่างในบทความนี้จะใช้การสร้างแบบ Gradle โดยไปที่ File > New > Project แล้วเลือกกลุ่ม Gradle

ทำการกดเลือก Kotlin (Javascript) แล้ว Next ต่อเพื่อสร้าง project ขึ้นมา

เมื่อเสร็จแล้วจะได้โครงสร้าง project และ lib kotlin-stdlib-js ตามข้างบน

ต่อมาก็มาทำการแก้ไข config ใน build.gradle กันซักหน่อย เพื่อให้ project รู้จัก KotlinJS และสร้างไฟล์ JS ตามที่เราต้องการ

ในตัวอย่างนี้ผมจะสร้าง JS เป็นแบบ CommonJS เพื่อให้เรียกผ่าน node และสร้างไฟล์ไว้ใน /dist/hello.js

compileKotlin2Js {
    kotlinOptions.moduleKind = "commonjs"
    kotlinOptions.outputFile = "dist/hello.js"
}

Let’s code

เตรียมพร้อม project แล้ว ได้เวลาเริ่ม code กันซักที

ตัวอย่างที่ผมจะสร้างจะเป็น app ง่ายๆ เพียงแค่โชว์ Hello World ขึ้น โดยจะทำการสร้างไฟล์ Kotlin ทำการ transpile เป็น JS แล้วให้ index.js เรียกใช้งานอีกทีนึง

เริ่มต้นสร้าง Kotlin กันก่อน

https://gist.github.com/babedev/da0b0af863f5eeea9de1d8b812939b3b

ตัว code จะประกอบด้วยสอง function คือ greet() และ greet(text: String) โดย greet() จะส่งค่า “Hello” กลับไป ส่วน greet(text: String) จะแสดง log ตามค่าที่ได้รับ

สังเกตุที่ตัว greet(text: String) จะมี @JsName(“sayHello”) กำกับไว้ เจ้าตัว JsName นั้น เมื่อทำการแปลงเป็น JS แล้ว มันจะ override ชื่อเดิมให้เป็นชื่อตามที่เรากำหนด นั้นคือเมื่อกลายเป็น JS แล้ว ตัว greet(text: String) จะกลายร่างเป็น sayHello(text) นั้นเอง

พอลอง build แล้ว ก็จะได้ไฟล์ hello.js ตามที่ config ไว้แบบนี้

รูปร่างดูดี เพียงเท่านี้เราก็จะมี JS ไว้เรียกใช้กันแล้ว ต่อมาการทำตัว index.js กันดีกว่า โดยสร้าง node project ในนี้ได้เลย

พอได้ project แล้ว ให้เพิ่ม dependency Kotlin เข้าไปด้วย เนื่องจาก JS ที่เราสร้างนั้นมีการเรียกใช้ stdlib ของ Kotlin อยู่

$ npm i --save kotlin

ตอนนี้ Kotlin module ก็พร้อมแล้ว เหลือแค่สร้าง index.js เพื่อเรียกใช้ hello.js ของเรา

https://gist.github.com/babedev/7b32f9f5c1f58a1192c2e7ac4c966982

จากตัวอย่างจะมีการเรียก function ทั้งสองตัวที่สร้างไว้ใน Kotlin คือตัว greet() และ sayHello(text) จุดประหลาดอย่างหนึ่งที่เห็นในนี้ก็คือชื่อ package ยาวเหยียดก่อนที่จะเรียก function

นั้นเพราะถ้าเรามีการประกาศ package ไว้ที่ไฟล์ Kotlin มันจะทำการสร้าง namespace ตามชื่อ package ที่เราตั้งไว้

เมื่อทุกอย่างพร้อมแล้ว ก็มา run กันดีกว่า

สุดคูลมาก ก็ประมาณนี้นะครับกับการทำ Kotlin ให้เป็น JS module เพื่อเรียกใช้ผ่าน node

Happy Kotlining ครับทุกท่าน

References

https://kotlinlang.org/docs/tutorials/javascript/working-with-modules/working-with-modules.html#using-commonjs

babedev/kotlinjs-nodejs