教程：Nodejs大漠插件开发游戏脚本实战（二）搭建项目

一、使用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大漠插件开发游戏脚本实战（二）搭建项目