vue3+vite+ts集成第三方js

xiaozaq2025-01-14 14:59

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 的类型检查和智能提示功能。