vue3+vite+ts集成第三方js

ops/2025/1/14 16:58:04/

npm run dev可以正常运行和测试。但是npm run build会报错。

要实现引入静态js,避免使用全局变量报错。

1. HTML 引入第三方 JS

在你的 HTML 文件中,通过 <script> 标签引入一个本地第三方 JS 文件,例如:

<script src="/path/to/tools.js"></script>

tools.js文件中定义如下函数:

function exitApp(){if(navigator){if (navigator.app) {navigator.app.exitApp();} else if (navigator.device) {navigator.device.exitApp();}}
}

2. 声明文件(tools.d.ts)

为了在 TypeScript 项目中使用这个全局变量而不产生错误提示,你需要为这个 JS 文件创建一个类型声明文件。例如,创建一个 tools.d.ts 文件,内容如下:

declare namespace cordova {// 在这里定义 cordova 对象的类型和结构function exitApp(): void;// 其他需要的类型声明
}

这个文件告诉 TypeScript 存在一个 rap 全局变量,并描述了它的类型和接口。

3. 引用声明文件(env.d.ts)

在 env.d.ts 文件中使用 /// <reference path="..."/> 语法引用声明文件:

该文件在项目根目录下,直接在后面加一行。注意保留前面3个斜杠。

/// <reference types="vite/client" />
/// <reference path="./src/uitls/tools.d.ts" />

4. 使用 cordova 变量

const exit = () => {showConfirmDialog({title: '确认要退出系统吗?',}).then(() => {cordova.exitApp();}).catch(() => {// on cancel});}

这些就可以正常编译通过了。npm run build。

cordova 变量的来源
HTML 引入:通过 HTML 文件引入的 tools.js 文件,使得浏览器环境中存在一个全局的 rap 对象。
TypeScript 类型声明:通过 tools.d.ts 文件中的 declare namespace rap {},TypeScript 知道了 rap 的结构和类型。
项目引用:env.d.ts 中的引用确保 TypeScript 编译器在整个项目中都能识别 rap 变量的类型信息。
这样,在项目中使用 rap 变量时,既能够利用浏览器中的全局变量,又可以享受 TypeScript 的类型检查和智能提示功能。


http://www.ppmy.cn/ops/150054.html

相关文章

【C++经典例题】求1+2+3+...+n,要求不能使用乘除法、for、while、if、else、switch、case等关键字及条件判断语句

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a; 期待您的关注 题目描述&#xff1a; 原题链接&#xff1a; 求123...n_牛客题霸_牛客网 (nowcoder.com) 解题思路&#xff1a; …

深入探讨 Vue.js 的动态组件渲染与性能优化

Vue.js 作为一款前端领域中备受欢迎的渐进式框架&#xff0c;以其简单优雅的 API 和灵活性受到开发者的喜爱。在开发复杂应用时&#xff0c;动态组件渲染是一项极其重要的技术&#xff0c;它能够在页面中动态地加载或切换组件&#xff0c;从而显著提升应用的灵活性与用户体验。…

CentOS 8 如何安装java与mysql

在CentOS 8上安装Java和MySQL的步骤如下&#xff1a; 1. 安装 Java 1.1 安装 OpenJDK&#xff08;推荐&#xff09; CentOS 8 默认的软件仓库提供了 OpenJDK 包&#xff0c;您可以直接使用 dnf 命令安装。 # 更新系统 sudo dnf update -y# 安装 OpenJDK 11&#xff08;Cent…

B. Gorilla and the Exam 题解

Problem - 2057B - Codeforces 这个题目著需要知道有多少不重复的数字&#xff0c;然后再把数量最少的数字进行变更为其它数量多的数字&#xff0c;直到剩余一个数字。 当然做这个我第一反应是使用unordered_map来进行储存数字和数字的数量&#xff0c;然后再排序。 后来翻题…

decltype

decltype 是 C11 引入的关键字&#xff0c;用于推导表达式的类型。它可以在编译时获取某个表达式或变量的类型&#xff0c;并将其作为类型使用。decltype 的主要用途包括&#xff1a; &#xff08;1&#xff09;推导变量或表达式的类型。 &#xff08;2&#xff09;在泛型编程中…

Android SystemUI——基础简介(一)

Android SystemUI 是 Android 操作系统的一部分&#xff0c;负责处理与用户界面相关的所有元素。它是 Android 设备上的一个关键组件&#xff0c;管理着屏幕顶部的状态栏&#xff08;显示时间、信号强度、电池电量等&#xff09;、屏幕底部的导航栏&#xff08;返回、主页、最近…

Airflow:TimeSensor感知时间条件

在数据管道工作流中&#xff0c;任务可能需要在特定的时间执行&#xff0c;或者在继续之前等待一定的时间。为了满足这些需求&#xff0c;Apache Airflow提供了TimeSensor&#xff0c;这是一种内置Sensor&#xff0c;可以监控当前时间&#xff0c;并在达到指定时间时触发后续任…

Swift 开发指南:数字字面量(Numeric Literals)

Swift 开发指南&#xff1a;Numeric Literals 1. 整数字面量&#xff08;Integer Literals&#xff09;表示方法总结 2. 浮点数字面量&#xff08;Floating-point Literals&#xff09;表示方法指数的含义总结 3. 数字字面量的格式化常见格式化方式总结 4. 示例代码总结5. 扩展…