Kotlin Day 6 : 用 Kotlin 取代寫 Javascript - Kotlin/JS
--
( 關於 如何從 blogger 中插入代碼，可以參考這篇 - 網誌鏈結 )
Kotlin Multiplatform
Kotlin 官網 - 鏈結
越寫 Kotlin 越發喜歡這個語言。最近 Kotlin 推出了 multiplatform 跨平台，不但可以拿來開發 Android APP，也可以拿來開發 iOS APP; 心想, Kotlin 是基於 Java 誕生的新一代的程式語言，javascript 有個 java, 是否也可以拿來做 javascript 的事情呢？一問 AI 果然有，昨晚試了一下打通了，趕快來記錄一下：
Kotlin/JS
Kotlin 官網 - 鏈結
Kotlin/JS 是 Kotlin 語言的一個重要特性，允許開發者使用 Kotlin 語言來編寫 JavaScript 代碼。這一功能的出現主要是為了滿足現代 Web 開發的需求，並提供一種更安全、更高效的方式來構建前端應用程序。
背景與緣由
Kotlin 是由 JetBrains 開發的一種靜態類型編程語言，最初設計用於與 Java 互操作。隨著 Web 應用程序的普及，開發者需要一種能夠在 JavaScript 生態系統中運行的語言。Kotlin/JS 的推出正是為了填補這一空白，讓開發者能夠利用 Kotlin 的語法和特性來編寫 JavaScript 代碼，從而提高開發效率和代碼的可維護性。
Kotlin/JS 的主要特性
轉譯功能：Kotlin/JS 能夠將 Kotlin 代碼轉譯為 JavaScript，這意味著開發者可以使用 Kotlin 的語法和特性來編寫代碼，而不必直接使用 JavaScript。這樣可以減少因語法差異而導致的錯誤，並提高代碼的可讀性和可維護性。
類型安全：Kotlin 提供了靜態類型檢查，這有助於在編譯時捕獲錯誤，從而減少運行時錯誤的可能性。這一特性在 JavaScript 中是缺乏的，因此使用 Kotlin/JS 可以提高代碼的安全性。
多平台支持：Kotlin/JS 是 Kotlin 多平台項目的一部分，這意味著開發者可以在不同的平台（如 Android、iOS 和 Web）之間共享代碼。這樣可以減少重複工作，並提高開發效率。
與 JavaScript 生態系統的互操作性：Kotlin/JS 允許開發者使用現有的 JavaScript 庫和框架，例如 React 和 Vue.js，這使得 Kotlin/JS 可以輕鬆集成到現有的 JavaScript 項目中。
改進的編譯器：Kotlin/JS 的 IR 編譯器相較於舊版編譯器有許多改進，包括減少生成的可執行文件的體積和提高與 JavaScript 生態系統的互操作性。
使用 Kotlin/JS 的場景
前端開發：開發者可以使用 Kotlin/JS 編寫 Web 前端應用程序，利用 Kotlin 的類型安全性和語法優勢來操作 DOM 和 Web API。
全棧開發：Kotlin/JS 使得開發者能夠在前端和後端之間共享代碼，這對於全棧開發特別有用。例如，開發者可以在 Kotlin/JVM 中編寫後端邏輯，並在 Kotlin/JS 中重用這些邏輯來處理前端請求。
創建庫：開發者可以使用 Kotlin/JS 創建可供 JavaScript 和 TypeScript 使用的庫，這樣可以擴展 Kotlin 的應用範圍，並使其在更廣泛的開發社區中得到應用。
實戰
想到幾年前自己有做過 github.io 可以放自己的程式來跑 Javascript - 網誌，那如果 kotlin 程式可行, 應該也可以試著走這條路。和 AI 討論後：
---
Kotlin 本身無法直接在瀏覽器中執行，但你可以利用 Kotlin/JS 將 Kotlin程式編譯成 JavaScript，再部署到 GitHub Pages（即github.io）上。這就類似於你平時直接寫 JavaScript 的方式，只不過多了一個編譯步驟。
詳細說明
- 編譯過程：Kotlin/JS 是 Kotlin 提供的一個工具，它能將 Kotlin 程式轉換成 JavaScript。轉換後的 JavaScript 代碼就可以在瀏覽器中執行，這意味著你可以在 GitHub Pages 上展示你的網頁應用。
- 部署方式：編譯後的靜態資源（HTML、JavaScript、CSS
等）可以放在 GitHub repository 的
gh-pages分支上或其他靜態網站托管方案中，並通過 github.io 的網址訪問。 - 開發工具：你可以使用 IntelliJ IDEA 或 Gradle 等工具來配置 Kotlin/JS 編譯，這些工具會幫助你自動化構建與部署流程。
因此，雖然 Kotlin 無法像 JavaScript 一樣被瀏覽器原生解析，但經過 Kotlin/JS 編譯後的程式碼可以達到類似效果，可以在 github.io 上順利執行並展示網頁內容。
---
看來可行, 開幹：下面是一個完整的示例，說明如何從零開始建立一個 Kotlin/JS 項目，讓編譯後的 JavaScript 能夠在 GitHub Pages（即 github.io）上執行並顯示「Hello World」這個字串。
1. 建立 Kotlin/JS 項目
首先，你可以使用 Gradle 與 IntelliJ IDEA 快速建立一個 Kotlin/JS 項目。
安裝套件: WebCalm: JavaScript and CSS
因為我的IDEA是社群版本(Community Edition)，而非付費版本，所以有些AI建議的做法，並非直接可以使用。
還好有大神做了這個套件 在 IDEA -> Settings -> Plugins 中, 有一個
WebCalm: JavaScript and CSS
開啟新的 project
---
設置Gradle
以下是一個簡單的 Gradle 配置範例（build.gradle.kts）：
---
plugins {
kotlin("js") version "2.0.20" // 使用最新穩定版本的 Kotlin/JS 插件
}
group = "com.neojou"
version = "1.0-SNAPSHOT"
repositories {
mavenCentral()
}
dependencies {
implementation(kotlin("stdlib-js")) // Kotlin/JS 標準庫
implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.9.1") // 可選，用於更方便的 HTML 操作
}
kotlin {
js {
browser {
// 配置 Webpack 打包
webpackTask {
mainOutputFileName = "app.js"
}
// 配置運行任務
runTask {
mainOutputFileName = "app.js"
}
commonWebpackConfig {
cssSupport{
enabled = true
}
}
}
binaries.executable() // 生成可執行的 JS 文件
}
}
tasks {
// 可選：確保編譯後自動運行
named("run") {
dependsOn("browserDevelopmentRun")
}
}
---
PS: 有時Gradle 沒有反應, 可以在 Files -> Invalidate Caches 看看
- 主程式: main.kt 接下來，在
src/main/kotlin/main.kt中撰寫簡單的程式碼，讓頁面顯示「Hello World」：
---
import kotlinx.browser.document
fun main() {
// 創建文字節點並添加到 body
//val textNode = document.createTextNode("Hello World")
//document.body?.appendChild(textNode)
document.body?.textContent = "Neo: Hello World! Keep Walking!"
}
---
2. 編譯並產生靜態資源
在項目根目錄下，透過命令列執行以下命令來進行編譯和打包：
---
./gradlew browserProductionWebpack
---
此命令會編譯你的 Kotlin 代碼並產生對應的 JavaScript、HTML、CSS
等資源，通常產生的靜態檔案會位於 build/distributions
目錄下。
PS1:我的是產生在 build/kotlin-webpack 目錄之下
PS: 雖然編譯會出現 warning 說Gradle的plugins 中, kotlin(“js”) 要改成 kotlin(“multiplatform”)，但我這樣改完編譯會有問題，之後再研究看看。
3. Local 端測試
- 在
build/kotlin-webpack目錄下, 可以建一個 index.html
---
<html>
<head>
<title>Kotlin/JS Demo</title>
</head>
<body>
<script src="./js/productionExecutable/app.js"></script>
</body>
</html>
---
- 啟動 HTTP 伺服器：
---
cd /path/to/your/kotlin-js-project/build/kotlin-webpack/
python3 -m http.server 8000
---
- 訪問 http://localhost:8000 ，檢查是否能正確顯示：
4. 上傳 github.io
如前所述，之前有做過 github.io 可以放自己的程式來跑 Javascript - 網誌所以這就挺簡單的, 可以把 上面生成好的 js 檔案, 上傳到自己的 github.io 上即可
這樣直接瀏覽器連接到這網站 http://neojou.github.io/my-kotlin-js-app 即可
---
如果覺得後面目錄記不住, 可以在上一層主目錄的 index.html, 加上這個鏈結
（ index.html - github )
<li><a href="my-kotlin-js-app/index.html"> Kotlin/JS </a><br/></li>
這樣在 http://neojou.github.io/ 中, 就可以看到這個選項
( 這些就比較和 html 的技巧相關了, 不再贅述 )
留言
張貼留言