2019年7月5日 星期五

使用 kotlinc-js 編譯程式碼快速學習 Kotlin 語言

1. 到官網下載 kotlin compiler 編譯器(kotlin-compiler-1.3.40.zip), 用 unzip 解壓縮並放在適當目錄(例如 pathToKotlinc), 編譯的執行檔會在目錄 bin 底下, 程式庫在目錄 lib 底下. 再將 lib 目錄下的檔案 kotlin-stdlib-js.jar 用 unzip 解壓縮至適當位置, 只提取裡面的 kotlin.jskotlin.js.map (debug 時會用到)檔案就可以了, 將他複製到工作目錄, 例如:
        cd
        mkdir   work
        cd work
        unzip  pathToKotlinc/lib/kotlin-stdlib-js.jar
2. 在工作目錄用文字編輯器寫一個 kotlin 程式, 例如:
        geany my.kt &
3. 將以下作複數運算的範例程式存成檔案 my.kt
import kotlin.math.*
data class C(var r:Double, var i:Double) { // C: Complex number, r: real part, i:image part
        val square:Double =  r*r + i*i   // |C|2
        val length:Double = sqrt(square) // abs(C) = |C|  = sqrt(|C|2)
        operator fun plus(a:C):C { // +
            r += a.r
            i += a.i
            return this
        }
        operator fun minus(a:C):C {  // -
            r -= a.r
            i -= a.i
            return this
        }
        operator fun times(a:C):C { // *
            val temp = a.r * r - a.i * i // real part
            i = a.i*r + a.r*i  // image part
            r = temp
            return this
        }
        operator fun div(a:C):C { //  ÷
            if (a.length > 0f) {
                val temp = (a.r*r + a.i * i) / a.square // real part
                i = (a.i*r - a.r*i) / a.square  // image part
                r = temp
            } else throw Exception("Divide by zero(length=0)")
            return this
        }
        operator fun invoke( ):C{ // dump self complex number
            val real   = floor(r*100+0.5).toFloat()/100 // 實部只顯示到小數點 2 位, 4 捨 5 入
            val imag = floor(i*100+0.5).toFloat()/100 // 虛部只顯示到小數點 2 位, 4捨 5 入
            if (imag < 0) println("$real - ${-imag} i")  else  println("$real + $imag i")
            return this
        }

fun main(){
    try {
         val c = C(3.0, 3.0) / C(5.0, 2.0)   //  c = (3 + 3i) / (5 + 2i)
          c( )  // dump
    } catch (e:Exception){
        println(e.message)
    }
}
4. 用 kotlin 的編譯器 kotlinc-js 將上述 kotlin 原始碼翻譯為 Javascript:
        pathToKotlinc/bin/kotlinc-js   my.kt   -output   my.js
或是利用 geany 的設定組建命令, 直接點選工具欄:  組建(B) - > 設定組件命令(S), 第一欄隨意輸入識別名稱(例如 kotlin2js),  第二欄輸入 kotlin2js 編譯器的位置及參數(%f 是目前編輯檔案名稱, %e 是不含副檔名的檔案名稱, -output 可以指定輸出的檔案名稱), 例如:
          pathToKotlinc/bin/kotlinc-js   %f   -output  %e.js
意思是說用  kotlinc-js 將目前的檔案翻譯成 Javascript, 輸出檔與編譯的同名稱但副檔名改為 js, 第三欄可以空白預設是目前的工作目錄, 設定好後, 用滑鼠點選: 組建 ->  kotlin2js 執行看看, 應該會在工作目錄編譯出 my.js.
若要在 vscode 裏面編譯, 參考  https://code.visualstudio.com/docs/editor/variables-reference, 編寫一個 tasks.json 檔案, 點選 Terminal -> Configure Tasks帶出編輯視窗, 把以下內容寫入:
{
    "tasks": [{
            "label": "Kotlinc2js",
            "type": "shell",
            "command": "pathToKotlinc/bin/kotlinc-js",
            "args": ["${file}", "-output", "${fileBasenameNoExtension}.js"],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }]
}
存檔後, 點選 Terminal -> Run Build task 或是用快速按鍵 Ctrl-Shift-B, 就能將目前編輯的 Kotlin 程式檔轉換成 Javascrip
5. 在工作目錄底下用文字編輯器另外編輯一個 my.html 準備讓瀏覽器開啟, 並在開發工具底下執行用 kotlin  語言所寫的程式碼(實際上是翻譯成兩個 Javascript 檔案: kotlin.js 及 my.js). 將以下內容存檔(my.html):
<html><head><meta charset="UTF-8"></head>
<body>
        <script type="text/javascript" src="kotlin.js"></script>
        <script type="text/javascript" src="my.js"></script>
</body>
</html>
6. 用瀏覽器 chrome 或是 firefox 打開上述 my.html 檔案, 接著按滑鼠右鍵點選檢查原始碼來開啟內建的開發工具, 在開發工具欄點選 console 就能看到程式的輸出結果

沒有留言: