Skip to content

Kotlin/JavaScript

Kotlin/JavaScript (Kotlin/JS) 允许你将 Kotlin 代码、Kotlin 标准库以及任何兼容的依赖项转译为 JavaScript。这样,你的 Kotlin 应用程序就可以在任何支持 JavaScript 的环境中运行。

通过 Kotlin Multiplatform Gradle 插件kotlin.multiplatform)使用 Kotlin/JS,可以从一个地方配置和管理面向 JavaScript 的 Kotlin 项目。

Kotlin Multiplatform Gradle 插件让你能够使用诸如控制应用程序打包以及直接从 npm 添加 JavaScript 依赖项等特性。关于可用配置选项的概览,请参见设置 Kotlin/JS 项目

Kotlin/JS 的当前实现面向 ES5ES2015 标准。

Kotlin/JS 的用例

以下是使用 Kotlin/JS 的一些常见方式:

  • 在前端和 JVM 后端之间共享公共逻辑

    如果你的后端是用 Kotlin 或其他 JVM 兼容语言编写的,你可以在 Web 应用程序和后端之间共享公共代码。这包括数据传输对象 (DTO)、验证和认证规则、REST API 端点的抽象等。

  • 在 Android、iOS 和 Web 客户端之间共享公共逻辑

    你可以在 Web 界面以及适用于 Android 和 iOS 的移动应用程序之间共享业务逻辑,同时保持原生用户界面。这避免了重复诸如 REST API 抽象、用户认证、表单验证和领域模型等公共功能。

  • 使用 Kotlin/JS 构建前端 Web 应用程序

    使用 Kotlin 开发传统 Web 前端,同时与现有工具和库集成:

    • 如果你熟悉 Android 开发,可以使用 KobwebKilua 等基于 Compose 的框架构建 Web 应用程序。

    • 使用 JetBrains 提供的适用于常见 JavaScript 库的 Kotlin 包装器,用 Kotlin/JS 构建完全类型安全的 React 应用程序。Kotlin 包装器(kotlin-wrappers)为 React 和其他 JavaScript 框架提供了抽象和集成。

      这些包装器还支持诸如 React ReduxReact Routerstyled-components 等补充库。你还可以通过与 JavaScript 生态系统的互操作性来使用第三方 React 组件和组件库。

    • 使用Kotlin/JS 框架,它们与 Kotlin 生态系统集成,并支持简洁且富有表现力的代码。

  • 构建支持旧版浏览器的多平台应用程序

    借助 Compose Multiplatform,你可以使用 Kotlin 构建应用程序,并在 Web 项目中重用移动和桌面用户界面。虽然 Kotlin/Wasm 是此目的的主要目标,但你也可以通过面向 Kotlin/JS 来扩展对旧版浏览器的支持。

  • 使用 Kotlin/JS 构建服务端和无服务器应用程序

    Kotlin/JS 中的 Node.js 目标平台允许你在 JavaScript 运行时上为服务端或无服务器环境创建应用程序。这提供了快速启动和低内存使用的特性。kotlinx-nodejs 库提供了从 Kotlin 类型安全地访问 Node.js API 的功能。

根据你的用例,Kotlin/JS 项目可以使用来自 Kotlin 生态系统的兼容库以及来自 JavaScript 和 TypeScript 生态系统的第三方库。

为了在 Kotlin 代码中使用第三方库,你可以创建自己的类型安全包装器,或使用社区维护的包装器。此外,你还可以使用 Kotlin/JS 的动态类型,它允许你跳过严格类型和库包装器,但会牺牲类型安全。

Kotlin/JS 也与最常见的模块系统兼容:ESMCommonJSUMDAMD。这允许你生成和使用模块,并以结构化的方式与 JavaScript 生态系统集成。

分享你的用例

Kotlin/JS 的用例中的列表并非详尽无遗。欢迎尝试不同的方法,并找到最适合你项目的方式。

在官方 Kotlin Slack#javascript 频道中与 Kotlin/JS 社区分享你的用例、经验和问题。

Kotlin/JS 入门

探索开始使用 Kotlin/JS 的基础知识和初始步骤:

  • 如果你是 Kotlin 新手,请先复习基本语法并探索Kotlin 之旅
  • 查看 Kotlin/JS 示例项目列表以寻求灵感。这些示例包含有用的代码片段和模式,可以帮助你启动你的项目。
  • 如果你是 Kotlin/JS 新手,请在探索更高级的主题之前,先从设置指南开始。

你想亲自尝试 Kotlin/JS 吗?

开始使用 Kotlin/JS

Kotlin/JS 示例项目

下表列出了一组示例项目,它们演示了各种 Kotlin/JS 用例、架构和代码共享策略:

ProjectDescription
Petclinic with common code between Spring and Angular演示了通过共享数据传输对象、验证和认证规则以及 REST API 端点的抽象,如何在企业应用程序中避免代码重复。代码在 Spring Boot 后端和 Angular 前端之间共享。
Fullstack Conference CMS展示了多种代码共享方法,范围从最简单到 KtorJetpack ComposeVue.js 应用程序之间的完全代码共享。
Todo App on a Compose-HTML-based Kobweb framework演示了如何通过重用 Android 开发者熟悉的方法来创建待办列表应用程序。它构建了一个由 Kobweb 框架提供支持的客户端 UI 应用程序。
Simple logic sharing between Android, iOS, and web包含一个用于构建 Kotlin 公共逻辑项目的模板,该项目被 Android (Jetpack Compose)、iOS (SwiftUI) 和 Web (React) 上的平台原生 UI 应用程序所使用。
Full-stack collaborative to-do list演示了如何使用带有 JS 和 JVM 目标平台的 Kotlin Multiplatform 创建用于协作的待办列表应用程序。它使用 Ktor 作为后端,以及 Kotlin/JS 和 React 作为前端。

Kotlin/JS 框架

Kotlin/JS 框架通过提供即用型组件、路由、状态管理以及其他用于构建现代 Web 应用程序的工具来简化 Web 开发。

查看由不同作者编写的 Kotlin/JS 可用框架

加入 Kotlin/JS 社区

你可以加入官方 Kotlin Slack 中的 #javascript 频道,与社区和 Kotlin/JS 团队交流。

接下来