当前位置: 首页 > news >正文

vue3+vite+ts集成第三方js

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.lryc.cn/news/520371.html

相关文章:

  • android framework.jar 在应用中使用
  • FFmpeg入门
  • 云平台一键部署【Video-Background-Removal】视频换背景,无任何限制,随意换
  • 量子计算:从薛定谔的猫到你的生活
  • 51单片机——I2C-EEPROM
  • R语言的语法糖
  • 【算法学习笔记】30:埃氏筛(Sieve of Eratosthenes)和线性筛(Linear Sieve)
  • 【AscendC】tiling方案设计不当引起的一个时隐时现的bug
  • 视频转码对画质有影响吗?视频融合平台EasyCVR支持哪些转码格式?
  • 工业视觉2-相机选型
  • 基于SpringBoot+Vue的健身房管理系统
  • leetcode 面试经典 150 题:快乐数
  • Leetcode 279. 完全平方数 动态规划 完全背包问题
  • python学opencv|读取图像(三十三)阈值处理图像-限定像素
  • QT Quick QML 实例之椭圆投影,旋转
  • 炸砖块游戏的最终图案
  • LLM的实验平台有哪些:快速搭建测试大语言模型
  • python3GUI--大屏可视化-XX产业大数据指挥舱(附下载地址) By:PyQt5
  • .NET 9.0 的 Blazor Web App 项目中 Hash 变换(MD5、Pbkdf2) 使用备忘
  • uniapp 抖音小程序 getUserProfile:fail must be invoked by user tap gesture
  • (undone) MIT6.S081 2023 学习笔记 (Day5: LAB4 traps)
  • 前端笔记----
  • 学习华为熵减,激发组织活力
  • 9Hive数据倾斜
  • 【大数据】机器学习 -----关于data.csv数据集分析案例
  • 深入解析 C++ 类型转换
  • C++ union 联合(八股总结)
  • 聊聊AI Agent
  • scala代码打包配置(maven)
  • 慧集通(DataLinkX)iPaaS集成平台-业务建模之业务对象(二)