首页 >> js开发 >> jselectron 如何将任意资源打包的方法步骤js大全
jselectron 如何将任意资源打包的方法步骤js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
如何打包资源
如何打包资源如何打包资源只想写个图形小工具,本质上还是调用写好的 java 程序,因为我觉得在命令行里面来回切目录,复制路径等操作实在是太麻烦了。那么我现在已经搞定了如何从 electron 的 js 事件里获得文件路径,我也搞定了如何在 electron 的 main.js 里面创建新的进程执行指令,那么如何使用到打包好的 jar 包或者其他资源呢?直接看下 packages.json 里面吧。
{
"name": "....",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "export FAVOR=debug && electron .",
"pack": "electron-packager ./ yourAppName --platform=darwin --arch=x64 --app-version=0.0.1 --app-bundle-id=com.xxxx.yourAppName --out=build --overwrite --extra-resource='./extraResources'"
},
"build": {
"extraResources": [
"./extraResources/**"
]
},
}
{
"name": "....",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "export FAVOR=debug && electron .",
"pack": "electron-packager ./ yourAppName --platform=darwin --arch=x64 --app-version=0.0.1 --app-bundle-id=com.xxxx.yourAppName --out=build --overwrite --extra-resource='./extraResources'"
},
"build": {
"extraResources": [
"./extraResources/**"
]
},
}
需要注意的是 build 里面加了一个 extraResources,另外,通过 electron-packager 打包的参数里面也加上一个 --extra-resource='./extraResources'然后打包的时候就可以把你想要的任何文件打包进去了,jar 也好,python 脚本也好。如何引用资源
如何引用资源如何引用资源需要注意的是,debug 运行和 release 运行是不一样的,这里,我们就需要一个东西来在运行时区分,我现在是 debug 还是 release。注意上面的 json 脚本中,有一个 export FAVOR=debug,这个相当于在 debug 运行的时候加入了一个环境变量。怎么读取环境变量呢?在 main.js 里面这样读取:
console.log("favor: " + process.env.FAVOR)
console.log("favor: " + process.env.FAVOR)接下来就是区分运行时来获取资源路径了。
function getResPath() {
if (isDebug) {
return "./extraResources"
} else {
return process.resourcesPath + "/extraResources"
}
}
function getResPath() {
if (isDebug) {
return "./extraResources"
} else {
return process.resourcesPath + "/extraResources"
}
}
仅此记录一下,给可能需要的人。electron打包的一些坑
electron打包的一些坑electron打包的一些坑我们知道使用electron打包的时候设置asar为true,electron-builder会智能的把一些native的程序不打包到app.asar里面,但是我碰到一个很奇怪的问题,周五的时候需要使用语音的格式转换,用到了amrToMp3和ffmpeg-static这两个库,其中amrToMp3的主要代码:
const exec = require('child_process').exec
const path = require('path')
const ffmpeg = require('ffmpeg-static')
const ffmpegPath = ffmpeg.path
function amrToMp3(filepath, outputDir = './src/mp3') {
return new Promise((resolve, reject) => {
const basename = path.basename(filepath)
const filename = basename.split('.')[0]
const etc = basename.split('.')[1]
if (etc != 'amr') {
console.log('please input a amr file')
return
}
const cmdStr = `${ffmpegPath} -y -i ${filepath} ${outputDir}/${filename}.mp3`
exec(cmdStr, (err, stdout, stderr) => {
if (err) {
console.log('error:' + stderr)
reject('error:' + stderr)
} else {
resolve(`${outputDir}/${filename}.mp3`)
console.log(`transform to mp3 success! ${filepath}->${outputDir}/${filename}.mp3`)
}
})
})
}
const exec = require('child_process').exec
const path = require('path')
const ffmpeg = require('ffmpeg-static')
const ffmpegPath = ffmpeg.path
function amrToMp3(filepath, outputDir = './src/mp3') {
return new Promise((resolve, reject) => {
const basename = path.basename(filepath)
const filename = basename.split('.')[0]
const etc = basename.split('.')[1]
if (etc != 'amr') {
console.log('please input a amr file')
return
}
const cmdStr = `${ffmpegPath} -y -i ${filepath} ${outputDir}/${filename}.mp3`
exec(cmdStr, (err, stdout, stderr) => {
if (err) {
console.log('error:' + stderr)
reject('error:' + stderr)
} else {
resolve(`${outputDir}/${filename}.mp3`)
console.log(`transform to mp3 success! ${filepath}->${outputDir}/${filename}.mp3`)
}
})
})
}其中用到了exec这个命令,ffmpegPath打包后基本是****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg,但是打包后运行提示了can not found ****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg 很尴尬,但是我去解压了,明明是存在的,后来我去看了类似的一个库node-notifier,发现用的是execFile这个命令,然后我修改了一下,结果。。。。居然就可以了。这个地方谁知道原因,求解答。。。。修改之后的程序代码:
var ffmpegPath = path.join(
__dirname,
'bin',
platform,
arch,
platform === 'win32' ? 'ffmpeg.exe' : 'ffmpeg'
)
execFile(ffmpegPath, ['-y', '-i', inputPath, cmdStr], function (err, stdout, stderr) {
if (err) {
console.log('error:' + stderr);
reject('error:' + stderr);
} else {
resolve(outputDir + '/' + filename + '.mp3');
console.log('transform to mp3 success! ' + filepath + '->' + outputDir + '/' + filename + '.mp3');
}
});
var ffmpegPath = path.join(
__dirname,
'bin',
platform,
arch,
platform === 'win32' ? 'ffmpeg.exe' : 'ffmpeg'
)
execFile(ffmpegPath, ['-y', '-i', inputPath, cmdStr], function (err, stdout, stderr) {
if (err) {
console.log('error:' + stderr);
reject('error:' + stderr);
} else {
resolve(outputDir + '/' + filename + '.mp3');
console.log('transform to mp3 success! ' + filepath + '->' + outputDir + '/' + filename + '.mp3');
}
});
如何打包资源如何打包资源只想写个图形小工具,本质上还是调用写好的 java 程序,因为我觉得在命令行里面来回切目录,复制路径等操作实在是太麻烦了。那么我现在已经搞定了如何从 electron 的 js 事件里获得文件路径,我也搞定了如何在 electron 的 main.js 里面创建新的进程执行指令,那么如何使用到打包好的 jar 包或者其他资源呢?直接看下 packages.json 里面吧。
{
"name": "....",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "export FAVOR=debug && electron .",
"pack": "electron-packager ./ yourAppName --platform=darwin --arch=x64 --app-version=0.0.1 --app-bundle-id=com.xxxx.yourAppName --out=build --overwrite --extra-resource='./extraResources'"
},
"build": {
"extraResources": [
"./extraResources/**"
]
},
}
{
"name": "....",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"start": "export FAVOR=debug && electron .",
"pack": "electron-packager ./ yourAppName --platform=darwin --arch=x64 --app-version=0.0.1 --app-bundle-id=com.xxxx.yourAppName --out=build --overwrite --extra-resource='./extraResources'"
},
"build": {
"extraResources": [
"./extraResources/**"
]
},
}
需要注意的是 build 里面加了一个 extraResources,另外,通过 electron-packager 打包的参数里面也加上一个 --extra-resource='./extraResources'然后打包的时候就可以把你想要的任何文件打包进去了,jar 也好,python 脚本也好。如何引用资源
如何引用资源如何引用资源需要注意的是,debug 运行和 release 运行是不一样的,这里,我们就需要一个东西来在运行时区分,我现在是 debug 还是 release。注意上面的 json 脚本中,有一个 export FAVOR=debug,这个相当于在 debug 运行的时候加入了一个环境变量。怎么读取环境变量呢?在 main.js 里面这样读取:
console.log("favor: " + process.env.FAVOR)
console.log("favor: " + process.env.FAVOR)接下来就是区分运行时来获取资源路径了。
function getResPath() {
if (isDebug) {
return "./extraResources"
} else {
return process.resourcesPath + "/extraResources"
}
}
function getResPath() {
if (isDebug) {
return "./extraResources"
} else {
return process.resourcesPath + "/extraResources"
}
}
仅此记录一下,给可能需要的人。electron打包的一些坑
electron打包的一些坑electron打包的一些坑我们知道使用electron打包的时候设置asar为true,electron-builder会智能的把一些native的程序不打包到app.asar里面,但是我碰到一个很奇怪的问题,周五的时候需要使用语音的格式转换,用到了amrToMp3和ffmpeg-static这两个库,其中amrToMp3的主要代码:
const exec = require('child_process').exec
const path = require('path')
const ffmpeg = require('ffmpeg-static')
const ffmpegPath = ffmpeg.path
function amrToMp3(filepath, outputDir = './src/mp3') {
return new Promise((resolve, reject) => {
const basename = path.basename(filepath)
const filename = basename.split('.')[0]
const etc = basename.split('.')[1]
if (etc != 'amr') {
console.log('please input a amr file')
return
}
const cmdStr = `${ffmpegPath} -y -i ${filepath} ${outputDir}/${filename}.mp3`
exec(cmdStr, (err, stdout, stderr) => {
if (err) {
console.log('error:' + stderr)
reject('error:' + stderr)
} else {
resolve(`${outputDir}/${filename}.mp3`)
console.log(`transform to mp3 success! ${filepath}->${outputDir}/${filename}.mp3`)
}
})
})
}
const exec = require('child_process').exec
const path = require('path')
const ffmpeg = require('ffmpeg-static')
const ffmpegPath = ffmpeg.path
function amrToMp3(filepath, outputDir = './src/mp3') {
return new Promise((resolve, reject) => {
const basename = path.basename(filepath)
const filename = basename.split('.')[0]
const etc = basename.split('.')[1]
if (etc != 'amr') {
console.log('please input a amr file')
return
}
const cmdStr = `${ffmpegPath} -y -i ${filepath} ${outputDir}/${filename}.mp3`
exec(cmdStr, (err, stdout, stderr) => {
if (err) {
console.log('error:' + stderr)
reject('error:' + stderr)
} else {
resolve(`${outputDir}/${filename}.mp3`)
console.log(`transform to mp3 success! ${filepath}->${outputDir}/${filename}.mp3`)
}
})
})
}其中用到了exec这个命令,ffmpegPath打包后基本是****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg,但是打包后运行提示了can not found ****/app.asar/src/node_modules/ffmpeg-static/bin/darwin/x64/ffmpeg 很尴尬,但是我去解压了,明明是存在的,后来我去看了类似的一个库node-notifier,发现用的是execFile这个命令,然后我修改了一下,结果。。。。居然就可以了。这个地方谁知道原因,求解答。。。。修改之后的程序代码:
var ffmpegPath = path.join(
__dirname,
'bin',
platform,
arch,
platform === 'win32' ? 'ffmpeg.exe' : 'ffmpeg'
)
execFile(ffmpegPath, ['-y', '-i', inputPath, cmdStr], function (err, stdout, stderr) {
if (err) {
console.log('error:' + stderr);
reject('error:' + stderr);
} else {
resolve(outputDir + '/' + filename + '.mp3');
console.log('transform to mp3 success! ' + filepath + '->' + outputDir + '/' + filename + '.mp3');
}
});
var ffmpegPath = path.join(
__dirname,
'bin',
platform,
arch,
platform === 'win32' ? 'ffmpeg.exe' : 'ffmpeg'
)
execFile(ffmpegPath, ['-y', '-i', inputPath, cmdStr], function (err, stdout, stderr) {
if (err) {
console.log('error:' + stderr);
reject('error:' + stderr);
} else {
resolve(outputDir + '/' + filename + '.mp3');
console.log('transform to mp3 success! ' + filepath + '->' + outputDir + '/' + filename + '.mp3');
}
});
相关文章:
- js解决vue-router 切换tab标签关闭时缓存问题js大全
- jsvue中destroyed方法的使用说明js大全
- js在vue中created、mounted等方法使用小结js大全
- jseslint+prettier统一代码风格的实现方法js大全
- js解决Vue router-link绑定事件不生效的问题js大全
- jsvue 清空input标签 中file的值操作js大全
- js解决vue的touchStart事件及click事件冲突问题js大全
- js解决vue 给window添加和移除resize事件遇到的坑js大全
- js微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现js大全
- jsvue 弹出遮罩层样式实例js大全