uTools插件总结:
针对第三方依赖,涉及到需要绝对地址引入的读取问题
思路:
1、使用preload.js
// 在plugin.json中配置
{
...
"preload": "preload.js",
...
}
2、目录结构中 新建 public 作为第三依赖的目录,将依赖的文件全部放在这里面,之后用到绝对路径就是通过拼接来实现
3、preload.js
构思:
1、打包upx后,手动拖到utool搜索框进行本地安装,
2、安装的文件在\AppData\Roaming\uTools\plugins中,为asar格式,
3、可以通过node fs 去读取里面的文件
4、将读取的文件通过node fs 去复制粘贴到 utools 的目录中,可以自定义文件夹(public) \AppData\Local\Programs\utools\public
5、如上述,我自定义了public文件,第三方依赖文件放到public中
实现过程
```
const path = require('path');
const fs = require('fs')
// 如果存在则不重复创建pulic目录
if (!fs.existsSync('./public')) {
fs.mkdirSync('./public', { recursive: true })
}
// 递归复制粘贴目录
function copyDirectory (sourceDir, destinationDir) {
if (!fs.existsSync(destinationDir)) {
fs.mkdirSync(destinationDir, { recursive: true });
}
const files = fs.readdirSync(sourceDir);
files.forEach((file) => {
const sourcePath = path.join(sourceDir, file);
const destinationPath = path.join(destinationDir, file);
const stats = fs.statSync(sourcePath);
if (stats.isDirectory()) {
copyDirectory(sourcePath, destinationPath);
} else {
fs.copyFileSync(sourcePath, destinationPath);
}
});
console.log('Directory copied successfully!');
}
// 源文件,即打包压缩后asar中的路径
const sourceDirectory = path.resolve(__dirname, './public');
// 目标文件,即 utool 目录,创建的public路径,这样就可以获取到绝对路径
const destinationDirectory = path.resolve('./public'); // utool的目录 AppData\Local\Programs\utools\public
// 如果 utools中自定义的public目录已经复制粘贴过第三方依赖,则不需要重复
if (!fs.existsSync('./public/tesseract')) {
copyDirectory(sourceDirectory, destinationDirectory);
}
// 挂载到window上
window.pathConfig = function () {
return {
sourceDirectory,
destinationDirectory, // 这个绝对路径就是到html或vue中用到的,通过拼接public中依赖文件
}
}
```
4、在 html 或 vue 中需要同 winodw.pathConfig() 获取 destinationDirectory,这里已经包含 /public
// 这里注意有可能本地路劲 双斜杠编码问题,这里可以转换一下
methods: {
// 斜字符转换
changePath (url) {
return url.replaceAll('\\', '/')
},
async orcHandler () {
// 从 preload.js 读取抛出的变量
const pathObj = window.pathConfig();
// 转义
const originPath = this.changePath(pathObj.destinationDirectory)
// 拼接绝对路径
console.log(originPath + 'lib/test.js')
}
}
5、vue 可以打包到dist中,然后复制 dist 中的js、css、html 到 自己的项目目录中,注意要和plugin.json、public、preload.js 平级
6、第三方依赖的文件不能太大,不然发布会报错