electron 集成 nsniuniuskin打包

245 阅读2分钟

一、electron-builder

electron-builder为官方推荐打包工具,相较而言配置简单,但是如果对安装卸载页面有定制化需求,自定义开发nsis就比较蹩脚,故而选用其他的打包工具来实现最终的自定义安装卸载打包

二、nsniuniuskin 打包工具

nsniuniuskin 是一款易上手的nsis打包程序,基本功能已实现,也可以基于此在做自定义开发

三、electron 如何集成 nsniuniuskin

想要基于nsniuniuskin 做二次开发,就必须了解nsniuniuskin 的代码结构和逻辑,有兴趣的可以看下,这里主要介绍集成方式,从前端gulp、webpack 等工具的角度而言,自动化打包流程基础可分为: 入口、文件(逻辑处理)、出口,nsis打包流程也一样,

单纯的接入nsniuniuskin,我们需要完成以下两步:
1、FilesToInstall
 为nsis打包程序的资源文件夹,我们需要将要打包的资源放置在此文件夹下 
2、将nsniuniuskin的打包命令接入自动化打包流 
3、 nmi_setup.nsi
 此文件为nsis打包程序变量的配置入口,在此除了修改exe相关的信息之外,还需要更新打包的出口文件,
   即 OutFile
​

如何将electron-builder打包之后的文件复制到nsniuniuskin打包器指定的文件夹

想实现这一步也可以手动复制,但是每次手动复制就比较麻烦,我们可以简单写个脚本,执行清除、复制的功能

const path = require('path')
const exec = require('child_process').exec
const child_process = require("child_process")
const shell = require('shelljs');
const { mkdirSync,copyFileSync } = require('fs')
​
let optionFile = [
    {
        target: path.join(__dirname, '../../dist/builder-effective-config.yaml'),
        newPath: path.join(__dirname, '../../dist-nsis/builder-effective-config.yaml')
    },
    {
        target: path.join(__dirname, '../../dist/builder-debug.yml'),
        newPath: path.join(__dirname, '../../dist-nsis/builder-debug.yml')
    }
]
​
class StartPack {
    constructor() {
        this.copiedPath = path.join(__dirname, '../win-unpacked')
        this.editName =  path.join(__dirname, '../FilesToInstall')
        this.resultPath = path.join(__dirname, '../../dist/win-unpacked')
        this.cwd = path.join(__dirname, '../../nsis')
        this.batPath = 'build-nim.bat'
        this.packDist = path.join(__dirname, '../../dist-nsis')
    }
    start() {
        this.copy()
    }
​
    copy() {
        shell.rm("-r", this.packDist)
        shell.rm("-r", this.copiedPath)
        shell.rm("-r", this.editName)       
        shell.cp('-R', this.resultPath, this.copiedPath);
        shell.mv(this.copiedPath, this.editName)     
        mkdirSync(this.packDist)
        optionFile.forEach((item) => {
            copyFileSync(item.target, item.newPath)
        })
        this.pack()
    }
    pack() {      
        let child_proc = child_process.execFile(this.batPath, [1, 2], {cwd: this.cwd}, () => {
        });
        child_proc.stdout.on('data', (data) => {
            console.log('pack--loading')
            if (data.indexOf('Press any key to continue') !== -1) {
                console.log('pack--success')
                child_proc.kill()
                shell.rm("-r", this.editName)
            }
        });
    }
}
​
let newStartPack = new StartPack()
​
newStartPack.start()

这里主要使用shell 对文件进行清除、拷贝的功能,使用child-process子线程进程nsis的打包

package.json调用

"startPack": "chcp 65001 && node nsis/node-piugin/start.js ",

至此功能已实现,相关程序demo代码