同学们可以私信我加入学习群!
作者是个狭隘的人,最近通读新中国七十年经济、军事之起伏,深感其中艰辛无奈与愤慨,故无民族之心,无爱国之心,无友爱之心,请勿参考代码。
他人笑我过于单纯,我笑他人满身精明。匹夫之身,或无青云之志,唯所立三尺之地,尽是拳拳赤心,位卑未敢忘忧国
如果跟着本系列文章一路学习,到现在应该已经可以使用electron+vue开发项目。但是这样开发的项目,打包后electron主进程部分是以源码的形式存在的,这样有利于前期的技术研究,梳理清楚打包后各文件的关系等等。
但是,真正的项目中,这样的代码太容易被人拿去抄袭。所以需要借助rollup+terser,对源码进行压缩混淆等操作。
不过这些开源工具压缩后的代码,也只是增加了逆向的复杂度,如果需要更安全的代码保护,请借助专业付费的安全软件。
如果能重来,我会选择webpack。但是,项目创建之处,为了体验vue3+vite,舍弃了webpack,这条技术栈也只能延续下来了。vite是基于rollup的,所以项目中使用rollup打包编译electron主进程部分,并不需要引入新的插件。
按照笔者的习惯,能在一个package.json中实现打包,就不为electron单独写一个打包配置,能用一个脚本vite.config.js完成编译,自然也就不想多写一个js脚本。
但是试验了几遍,做不到啊,不知道怎么在一个配置文件里,定义很多入口和出口文件的同时,为他们分别配置不同的参数。
归根结底,还是对vite和rollup熟练度不够,不过遇到困难,我选择放过自己,多写个rollup的配置来专门打包electron主进程部分。
所以现在项目的整体架构就是:
"dev": "node ./public/build.js dev && npm-run-all --parallel dev:vue start",
"build": "npm run build:vue && node ./public/build.js build && npm run build:e"
通过上面命令行,可以发现,除了build.js,其它都是很常规的前端命令。
不难猜测,如何修改package.json使其能够适配生产、开发环境,如何调用rollup插件打包编译electron主进程,这些操作都在build.js中。
build.js全部代码:
const path =require("path") ;
const fsPromise = require("node:fs/promises");
const fs = require("fs");
const util = require('node:util');
const exec = util.promisify(require('node:child_process').exec);
(async function (){
/*修改package.json*/
const cmdConfig=process.argv.splice(2)[0]
const url = path.join(process.cwd(), 'package.json')
const json = fs.readFileSync(url, 'utf-8')
let pkg = JSON.parse(json)
if(cmdConfig=='dev'){
// pkg.main='./electron/main/main.js'
pkg.main='./electron/main/main.js'
pkg.build.nsis.include= "./public/electron/installer.nsh"
pkg.build.win.icon="./public/electron/favicon.ico"
}else{
pkg.main='./dist/assets/progress.js'
pkg.build.nsis.include= "./dist/electron/installer.nsh"
pkg.build.win.icon="./dist/electron/favicon.ico"
}
const pkgStr=JSON.stringify(pkg, null, 2)
const writePromise=fsPromise.writeFile(url,pkgStr)
await writePromise
/*运行rollup*/
if(cmdConfig=='build'){
const { stdout, stderr } = await exec(`rollup --config rollup.config.main.js`);
const { stdoutPreload, stderrPreload } = await exec('rollup --config rollup.config.preload.js');
console.log('stdout:', stdout);
console.log('stdoutPreload:', stdoutPreload);
console.error('stderr:', stderr);
}
})()
了解这部分代码需要入门的nodejs知识,不过没有相关知识的同学也不用焦虑,nodejs无非也就是提供了一些api和js运行环境,本质上还是js语言。
即使零基础,要理解上面的代码,也不难。如果基础扎实的同学,参考上面代码即可,可不用详细了解下面的解析。
上面的打包脚本已经讲解地很细致了,即使同学对node不熟悉,也能了解每行代码在做什么。现在整套方案唯一还未讲解的,只有rollup配置了。
在build.js脚本中,只用两行代码,执行了rollup插件打包编译electron,而插件的参数,则配置在两个文件中:rollup.config.main.js、rollup.config.preload.js
以其中一个为例:
import commonjs from '@rollup/plugin-commonjs';
import nodeResolve from '@rollup/plugin-node-resolve';
import terser from '@rollup/plugin-terser';
const mainConfig={
input: 'electron/main/main.js', // 主进程入口文件
output: {
file: 'dist/assets/progress.js', // 输出文件
format: 'cjs' // 使用 CommonJS 格式
},
plugins: [
nodeResolve({
extensions: ['.js'] // 只处理.js和.json文件
}), // 解析 Node.js 模块
commonjs(), // 转换 CommonJS 模块
terser()
],
external:[
"electron"
]
}
export default mainConfig
这是main.js的rollup配置,主要是用了两个插件@rollup/plugin-commonjs和@rollup/plugin-node-resolve,terser为压缩混淆插件,可选用。
配置文件里,需要自己定义的就是入口文件,输出文件。从这里也可以看出,最终输出目录都定义为dist,所以会造成main.js与preload.js相对路径,在开发和生产环境有所不同,这也是我们为什么需要修改pacakge.js参数的原因。
项目源代码:码云地址,或直接在码云搜索:李泽/electron-vue-basic。有问题随时私信博主,看到就会解答的,如果一直不理你,那就是我也不懂。