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

news2024/11/20 7:20:20

概述

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!

在这里插入图片描述

示例工程传送门

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1358451.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

大数据框架ElasticSearch学习网站,让你的技能瞬间升级!

介绍:Elasticsearch是一个分布式、免费和开放的搜索和分析引擎,它适用于所有类型的数据,包括文本Elasticsearch是一个分布式、免费和开放的搜索和分析引擎,它适用于所有类型的数据,包括文本、数字、地理空间、结构化和…

如何保障开放网络边界安全?

针对开放式网络(办事大厅、视频网络等),如何在内部网络构建起一道安全屏障,有效解决广大用户普遍存在的无法保证网络边界完整、边界安全、公共场所终端摄像头管理、办事大厅智能设备(一体机等)管理、开放场…

1- forecasting at scale论文阅读

目录 1. 什么是时间序列2. 什么是时间序列预测3. 时间序列预测的范式4. 时间序列的专有名词介绍5. 时间序列评估 1. 什么是时间序列 按时间先后顺序出现的有序序列 2. 什么是时间序列预测 点预测:预测未来的某一个时间点,它的值到底是多少&#xff0c…

手机卡丢了不要急,全新补卡攻略赶紧收藏!

最近收到一些小伙伴的留言,手机卡办了好几张,所以就出现了手机卡丢失的现象。手机卡丢失补办更是让一些小伙伴们摸不着头脑。怎么补?如何补?需要哪些资料等等一系列的问题,让许多小伙伴都无从下手。今天小编就给大家整…

当试图回复传入消息时,消息应用程序会闪烁

问题描述: Actual Results: Unable to reply for incoming message as Messaging app flickers and closes. Expected Results: User should be able to send reply for incoming messages. Reproduction Steps: Stay in home screen. Receive an incoming mes…

Vue-2、初识Vue

1、helloword小案列 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>初始Vue</title><!--引入vue--><script type"text/javascript" src"https://cdn.jsdelivr.n…

护眼台灯哪个牌子好?2024年专业护眼台灯品牌排行榜!

近些年来&#xff0c;护眼台灯作为视力健康照明工具愈发受到欢迎&#xff0c;越来越多的人使用护眼台灯取代传统白炽灯&#xff0c;做护眼台灯的产品也是层出不穷。 不过&#xff0c;也有很多人对护眼台灯的效果保持怀疑的台灯&#xff0c;一是对护眼效果的疑问&#xff0c;二…

一个人,2 年时间,每月赚 6w 美金,独立开发者故事丨 RTE 开发者日报 Vol.120

开发者朋友们大家好&#xff1a; 这里是 「RTE 开发者日报」 &#xff0c;每天和大家一起看新闻、聊八卦。我们的社区编辑团队会整理分享 RTE &#xff08;Real Time Engagement&#xff09; 领域内「有话题的 新闻 」、「有态度的 观点 」、「有意思的 数据 」、「有思考的 文…

数据结构与算法之约瑟夫问题求解

N个人围成一圈&#xff0c;从第一个开始报数&#xff0c;第M个将被杀掉&#xff0c;最后剩下一个人&#xff0c;其余人都被杀掉。例如N6&#xff0c;M5&#xff0c;被杀掉的顺序是&#xff1a;5、4、6、2、3、1。 问最后留下的人是谁&#xff1f; 分析&#xff1a; 如N6&…

【Path的使用】Node.js中的使用Path模块操作文件路径

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;Node.js &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继续前进的勇…

2个nodejs进程利用redis 实现订阅发布

1.新建文件 redis_db.js use strict;const redis require(redis); const options {host: "127.0.0.1",port: 6379,password: "123456", // CONFIG SET requirepass "123456" }var array [] for(var i0; i<3; i){const client redis.crea…

期货日数据维护与使用_日数据维护_sqlite3数据库创建

目录 写在前面&#xff1a; 初始准备 开始编写数据库代码 t_product t_symbol_basemsg t_main_symbol t_online_symbol t_last30_daily 小贴士 写在前面&#xff1a; 本文默认已经创建了项目&#xff0c;如果不知道如何创建一个空项目的&#xff0c;请参看以下两篇博…

LLM Agent之再谈RAG的召回多样性优化

1. Query多样性 2019 Query Expansion Techniques for Information Retrieval: a Survey 传统搜索Query的扩展&#xff0c;有基于用户搜索日志挖掘的相似Query&#xff0c;有基于相同召回文档关联的相似Query&#xff0c;也有基于SMT的Query改写方案。那和大模型时代更搭配的自…

防蓝光护眼台灯哪个牌子好?2024护眼灯315合格产品

最近身边的宝妈们都来问我这个已有两个娃的老司机&#xff0c;刚上小学就是近视了&#xff0c;买什么台灯给家里孩子能保护视力&#xff0c;经过小学门口时&#xff0c;真的是戴眼镜的小朋友占多数&#xff0c;搜索了我国的近视数据&#xff0c;中国的人口有14亿人左右&#xf…

个人调用OCR

一、自己训练模型 二、调用现成API 此处介绍百度智能云API&#xff0c;因为有免费次数。&#xff08;原来一些网址在百度不是默认显示网址的&#xff0c;而是自己的网站名字&#xff09; 首页找到OCR 每个人每月能用1K次。&#xff08;有详细的API文档说明&#xff0c;不过跟…

爱了!水浸监测这个技术,看了都说好!

在当今社会&#xff0c;水浸事件可能对各类场所和设施造成严重的损害&#xff0c;从而威胁到财产安全和业务持续性。 水浸监控系统不仅仅是一种技术手段&#xff0c;更是对于防范水灾的一项战略性解决方案。水浸监控系统实时了解局势并采取迅速而有效的措施&#xff0c;从而最大…

STM32 CubeMX产生的程序架构

使用STM32CubeMX产生启动相关代码&#xff0c;配置各种外设。在后续程序开发过程中&#xff0c;有可能使用STM32CubeMX逐步产生使用的代码&#xff0c;为了将其产生的代码和我们程序隔离&#xff0c;一种可行的程序架构如下&#xff1a; 在此架构中&#xff0c;STM32CubeMX产生…

消化性溃疡与胃肠道微生物群

谷禾健康 据柳叶刀统计&#xff0c;消化性溃疡(PUD)每年影响全球400万人&#xff0c;据估计普通人群终生患病率为5−10%(Lanas A et al., 2017)。尽管消化性溃疡的全球患病率在过去几十年中有所下降&#xff0c;但其并发症的发生率却保持不变。 消化性溃疡是指胃或十二指肠黏膜…

Color Control

设计一个优秀的用户界面是一项艰巨的任务。特别是如果你想改变UI的颜色,调整所有元素可能需要花费大量时间。Color Control可以帮助你!在检查器中以可视化的方式将你的项目颜色定义为资源。Color Control为你提供了组件,当你编辑它们时,它们会自动更新你的UI元素。 颜色控制…