一、使用nvm-windows安装Nodejs
上一篇文章我们说过我们需要用到32位的Nodejs,而且因为一些特殊原因,我们要用到指定的版本。为了不影响我们其他项目的开发,这里用到一个Nodejs的版本管理工具nvm-windows,我们直接下载发行版中的nvm-setup.zip解压安装即可。
随后我们打开命令行,输入
nvm install 12.18.3 32
nvm会自动帮我们安装32位的nodejs以及对应版本的npm,然后我们切换到这个版本
nvm use 12.18.3 32
二、使用git克隆Electron项目
1.脚手架
用到的是一个vite+electron的脚手架vite-electron-quick,我们直接点击下载代码,然后复制https中的url
2.克隆项目
因为国内网络环境问题,我们使用源地址克隆项目可能非常难受。有很多方案可以解决这个问题,我讲一下我常用的两个方法,一是让终端走代理,具体自己查一下,有机会的话会顺带提一提;这里我用一个最简便的方法,但是这个方式最适合克隆一些开源项目,仅以下载为目的的项目。
我们在项目目录中打开终端,粘贴项目的http地址,然后在域名后面加上 .cnpmjs.org 使用我们的cnpm镜像源去克隆
git clone https://github.com.cnpmjs.org/MangoTsing/vite-electron-quick.git
3.安装依赖
cd ./vite-electron-quick
npm install
4.运行项目
npm run dev
三、修改项目架构
1.移除原有git信息
在项目下,通过命令显示隐藏文件夹
ls -a
删除 .git 文件夹
rm .git -force -r
2.目录结构
使用Visual Studio Code打开项目,我们可以看到 /src 文件夹下有两个文件夹main跟render
在这个项目下,
main 分配的是Electron的主进程,也就是我们写Nodejs的地方
render 分配的是渲染进程,写Vue的地方
3.lib文件夹
为了我们的打包正常,我们需要在做两个调整。
(1) 设置Electron不打包的文件夹
在main下面,新建一个文件夹,我愿意将他命名为library。用于存放我们的大漠插件dll、字库、图库、Redis或者其他不能被Electron打包的文件
随后我们打开项目根目录下的package.json文件,在build下新增一个属性
{
"build":{
...其他属性...
"extraResources":{
"from":"./src/main/library/",
"to":"library"
},
...其他属性...
}
}
(2) 设置Electron不打包的node模块
在配置Electron build的时候,我们只需要把前端的node_modules打包就可以了,而把主线程用到的模块打包的话,往往会造成模块的引用出错,我们修改一下package.json中build节点下,修改files一项
{
"build":{
...其他属性...
"files":[
"logo.ico",
"node_modules",
"dist/main/**",
"dist/render/**",
"!node_modules/vue",
"!node_modules/vue-router"
],
...其他属性...
}
}
四、随笔
第一个想说的。这个教程很大可能会有视频。因为我尝试了一下,录制视频的精力还是有的(剪辑就不一定了,视频录制好我会上传到B站随后加到本文末尾)。
把东西写出来才发现,如果要做到通俗易懂,兼顾小白的话,需要补充的知识或者额外内容实在是非常多。非常有可能会在一些没经验的小步骤上卡点。通常这种情况都是通过一个交流群去帮助小伙伴解答问题。所以我也会在这个教程完成之后建一个Electron的交流群,到时候欢迎大家的加入。
第二个想说的。为什么拖了这么久才开始写项目搭建。其实这个教程的技术含量低,我的水平也不高,更多的是一些细节跟踩坑,而且因为没有好的需求促使我去开发,所以我对游戏脚本的热情逐渐褪去,加上Electron单线程的性能多多少少有点拉跨,所以一开始本来打算放弃这个教程的。
又下决心来做一个是因为B站跟本站几个小伙伴催更,二来我觉得就算是简单简陋的教程,也是对自己技术的一个记录,从简单的开始,增加自己的输出未尝不是一件好事,所以我觉得继续做完这个教程。
毕竟不忘初心,方得始终
教程:Nodejs大漠插件开发游戏脚本实战(二)搭建项目