Kotlin/JS工程构建及编译运行到浏览器

概述

Kotlin/JS 提供了转换 Kotlin 代码、Kotlin 标准库的能力,并且兼容 JavaScript 的任何依赖项。Kotlin/JS 的当前实现以 ES5 为目标。

使用 Kotlin/JS 的推荐方法是通过 kotlin multiplatform Gradle 插件。它提供了一种集中且便捷的方式来设置与控制以 JavaScript 为目标的 Kotlin 项目。 这包括基本特性, 例如控制应用程序的捆绑,直接从 npm 添加 JavaScript 依赖项等等

搭建 Kotlin/JS 项目

Kotlin/JS 项目使用 Gradle 作为构建系统。为了开发者轻松管理其 Kotlin/JS 项目,我们提供了 kotlin multiplatform Gradle 插件,该插件提供项目配置工具以及用以自动执行 JavaScript 开发中常用的例程的帮助程序

一、添加插件

settings>Plugins>Marketplace

搜索:Kotlin Multiplatform Mobile

安装插件后重启Android Studio

二、新建Kotlin Multiplatform App 工程

但是目前该工程仅支持android IOS平台,但是这都不是我们的目标,我们的目标是JS

三、配置JS

在多平台模块的src下创建jsMain文件夹

接着在build.gradle.kts文件中配置:

sourceSets 下添加jsMain依赖配置

kotlin 下添加 js(IR)配置

具体配置含义可以在官网上查阅

传送门:
Kotlin/JS IR 编译器
添加对多平台库的依赖关系

到这里基本上已经配置的差不多了

四、调试

1、所有对build.gradle.kts的改动都要运行一下task:KotlinUpgradeYarnLock

用于更新yarn.lock文档

2、在gradle中找到Task:jsRun,双击运行,没有意外的话,会运行成功,获取到编译后的文件列表:这里不贴图了,主要是获取到对应模块的JS文件:KotlinJSTest-shared.js

3、创建运行到浏览器的html文件

在jsMain文件夹下创建:resource>index.html,依赖我们编译后生成的js文件:KotlinJSTest-shared.js

4、再次运行Task:jsRun 如果不出意外的话会成功!大功告成!binggo!

示例工程传送门

相关推荐
要加油哦~1 小时前
AI | 实践教程 - ScreenCoder | 多agents前端代码生成
前端·javascript·人工智能
消失的旧时光-19431 小时前
从 Kotlin 到 Dart:为什么 sealed 是处理「多种返回结果」的最佳方式?
android·开发语言·flutter·架构·kotlin·sealed
一个public的class1 小时前
你在浏览器输入一个网址,到底发生了什么?
java·开发语言·javascript
有位神秘人2 小时前
kotlin与Java中的单例模式总结
java·单例模式·kotlin
Jinkxs2 小时前
Gradle - 与Groovy/Kotlin DSL对比 构建脚本语言选择指南
android·开发语言·kotlin
&有梦想的咸鱼&2 小时前
Kotlin委托机制的底层实现深度解析(74)
android·开发语言·kotlin
golang学习记2 小时前
IntelliJ IDEA 2025.3 重磅发布:K2 模式全面接管 Kotlin —— 告别 K1,性能飙升 40%!
java·kotlin·intellij-idea
青茶3602 小时前
php怎么实现订单接口状态轮询请求
前端·javascript·php
火车叼位2 小时前
脚本伪装:让 Python 与 Node.js 像原生 Shell 命令一样运行
运维·javascript·python
VT.馒头2 小时前
【力扣】2727. 判断对象是否为空
javascript·数据结构·算法·leetcode·职场和发展