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!

在这里插入图片描述

示例工程传送门

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

激光焊接机:塑料产品制造中的革命性优势

随着科技的飞速发展,激光焊接机在塑料产品制造领域的应用越来越广泛。相较于传统的焊接技术,激光焊接机在塑料产品制造中展现出诸多优势,成为现代工业生产中不可或缺的一部分。 一、精确、高效的焊接性能 激光焊接机采用高能激光束作为焊接热…

【React系列】高阶组件

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 高阶组件 1.1. 认识高阶组件 什么是高阶组件呢?相信很多同学都听说过,也用过 高阶函数&…

kafka消息队列安装以及整合springboot使用

文章目录 一、JMS与AMQP二、安装2.1 Java安装2.2 Zookeeper 和 kafka安装2.3 docker-compose 安装【待定,远程连接可能连接不上】 三、Kafka数据存储流程和原理概述和LEOHW讲解四、代码客户端连接kafka五、**ProducerRecord和key的作用**5.1 **如果保证顺序消费&…

C++使用map插入insert数据(二进制数据和非二进制数据)接口封装+读取文件

1、定义编写代码 //生成insert sql语句std::string GetInsertsql(XDATA kv, std::string table);//插入非二进制数据bool Insert(XDATA kv, std::string table);//插入二进制数据bool InsertBin(XDATA kv, std::string table); std::string LXMysql::GetInsertsql(XDATA kv, s…

【四】CocosCreator-修改引擎源码

看源码的过程中,少不了得修修改改源码,做点实验。果断去找找源码在哪里,然后就可以快乐动手改源码了。 CocosCreator引擎源码主要就是js和原生C两类,分别在引擎目录的resources/engine和resources/cocos2d-x下,如图&am…

5600U PVE安装WIN10后直通核显

修改PVE系统配置 请先安装相同版本的PVE系统,其他版本如果存在问题请自行查找。 安装过程比较简单,具体方法请自行百度 1. 修改grub启动参数: 修改文件 /etc/default/grub 中 GRUB_CMDLINE_LINUX_DEFAULT 配置: GRUB_CMDLINE_LI…

自制Java镜像发布到dockerhub公网使用

文章目录 问题现象解决制作Java镜像发布使用 问题现象 书接上回,上周处理了一个docker问题,写了篇博客:自定义docker镜像,ubuntu安装命令并导出我们使用谷歌的jib插件打包,详情可以参考这篇文章:Spring Bo…

【React系列】Redux(一)管理状态

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 在React的开发过程中,Redux对于我们是非常重要的。 但是对于很多人来说,初次接触redux会感觉r…

Gin 框架介绍与快速入门

Gin 框架介绍与快速入门 文章目录 Gin 框架介绍与快速入门一、Gin框架介绍1. 快速和轻量级2. 路由和中间件3. JSON解析4. 支持插件5. Gin相关文档 二、基本使用1.安装2.导入3.第一个Gin 应用 三、应用举例四、Gin 入门核心1.gin.Engine2.gin.Context 一、Gin框架介绍 Gin是一个…

【LMM 009】MiniGPT-4:使用 Vicuna 增强视觉语言理解能力的多模态大模型

论文描述:MiniGPT-4: Enhancing Vision-Language Understanding with Advanced Large Language Models 论文作者:Deyao Zhu∗ Jun Chen∗ Xiaoqian Shen Xiang Li Mohamed Elhoseiny 作者单位:King Abdullah University of Science and Techn…

机器人制作开源方案 | 清洁机器人

作者:胡志宇、白永康、颉志国、刘昭迅、王维浩 单位:北京石油化工学院 指导老师:陈亚、王殿军 1. 设计方案论证 1.1 清洁机器人方案选择 目前,市场上清洁机器人比比皆是,各大品牌之间的竞争也相当激烈,…

【KingbaseES】实现MySql函数Field

CREATE OR REPLACE FUNCTION field(value TEXT, VARIADIC arr TEXT[]) RETURNS INT AS $$ DECLAREi INT; BEGINFOR i IN 1 .. array_length(arr, 1) LOOPIF arr[i] value THENRETURN i;END IF;END LOOP;RETURN 0; END; $$ LANGUAGE plpgsql IMMUTABLE;

Qt6学习笔记:对象树

使用QObject及其子类创建的对象是以对象树的形式来组织的。创建一个QObject对象时若设置一个父对象,它就会被添加到父对象的子对象列表里,一个父对象被删除时,其全部的子对象都会自动删除。QObject类的构造函数里有一个参数用于设置对象的父对…

报表控件Stimulsoft 2023回顾:都做了哪些产品的改变?

在2023年过去一年中,报表控件Stimulsoft 针各类控件都做了重大改变,其中新增了某些产品、同时加强了很多产品的性能和UI设计,更加符合开发者需求,下面就跟随小编一起来回顾,具体都有哪些↓↓↓ Stimulsoft Ultimate &…

HTTP打怪升级之路

新手村 上个世纪80年代末,有一天,Tim Berners-Lee正在工作,他需要与另一台计算机上的同事共享一个文件。他尝试使用电子邮件,但发现电子邮件不能发送二进制文件。Tim Berners-Lee意识到,他需要一种新的协议来共享二进制…

Elasticsearch:Serarch tutorial - 使用 Python 进行搜索 (二)

这个是继上一篇文章 “Elasticsearch:Serarch tutorial - 使用 Python 进行搜索 (一)” 的续篇。在今天的文章中,我们接着来完成如何进行分页及过滤。 分页 - pagination 应用程序处理大量结果通常是不切实际的。 因此&#xff0…

【萤火虫系列教程】1/5-Adobe Firefly 注册账号

001-Adobe Firefly 注册账号 AI时代如火如荼,Adobe也不甘落后,于今年3月份发布AI创意生成工具Firefly(中文翻译:萤火虫) Adobe Firefly简介 Adobe Firefly的官方介绍为:Firefly是Adobe产品中新的创意生成…

在排序数组中查找元素的第一个和最后一个位置

在排序数组中查找元素的第一个和最后一个位置 题目解法一解法二&#xff08;二分查找&#xff09;代码展示原理剖析 题目 在排序数组中查找元素的第一个和最后一个位置 解法一 class Solution { public:vector<int> searchRange(vector<int>& nums, int targ…

CentOs搭建Kafka集群

Centos7搭建Kafka集群 一、集群规划二、环境准备三、安装kafka集群1、下载kafka安装包2、解压3、配置环境变量4、编辑配置文件①修改broker.id②配置kafka运行日志路径③配置Zookeeper集群地址 5、启动集群6、测试kafka①、创建topic②、查看当前服务器中的所有topic③、生产者…

Springcloud 微服务实战笔记 Zuul

优点 解决路由规则与服务实例维护问题。对于类似签名校验、登录校验在微服务架构中的冗余问题。 入门使用 构建网关 pom.xml引入 spring-cloud-starter-netflix-zuul <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-c…