打包问题，是每一位Tyrano用户都不得不品尝的一个环节。(Tyrano Studio的导出会比Tyrano Builder好一点)

就是这样(

不过究其原因，是因为Tyrano在打包的时候，后台会下载electron，但是下载速度又很慢，往往几分钟才下不到几MB(原包约100MB)，而且当下载时间过久的话则会下载失败，就会导致“导出”会一直转圈，但就是无法完成，因为导出需要Electron，但是Electron又下载失败了，就陷入了一个死循环。

这一问题并不能用VPN解决，至少我无法用VPN解决，即使是挂着

不过理论上只要下载好一次electron，后面就不用再下载第二次了，也就是不会再卡导出了。

不过也有人可能会提出提前下好Electron然后替换下载，不过实际上并没有什么用，他每次下载，会在C:\Users\zeroi\AppData\Local\Temp路径内生成一个名为“electron-download-随机后缀”的文件夹，随机后缀部位每次会随机一定长度的随机字符串，所以基本是无法提前替换的。如果是等下载开始后再替换也没有什么用，因为校验文件环节需要等下载完成才会开始，即使你提前替换了，他后台进度条没有下载完成，那依旧会继续下载，还是卡着的局面。

至于有没有其他解决方法，更换更好的VPN、更换旧版本Tyrano、让别人导出之类的都是方法，不过我们并不是来讨论这些解决方法的，这篇文章的主题就是让用户手动打包游戏。

另外，本文章不会介绍下文下载的都是上面东西，太过浪费口舌，想知道是什么的自己去搜索就好了。

1.下载Node.js

[!NOTE]

如果本地已有Node.js，即可跳过该步骤

首先打开Node.js的下载界面

此处选择长期支持版本即可，后选择Windows安装包(.msi)的64位进行下载即可。

下载过来以后双击msi程序，

此处可以将这一步的Add to PATH改为Entire feature will be installed on local hard drive。

其余的一路默认安装过来即可。

随后按下Win+R键，唤出运行窗口，输入cmd打开命令提示符，输入

npm -v

查看自己版本号，如果安装正确，应该将显示一串数字吗，这就是版本号了。

2.设置npm镜像源

镜像源是很有必要的，npm本身的下载链接都指向国外，下载速度十分之慢，不设置镜像源的话，下载十分缓慢，而且很容易失败。

还是一样打开命令提示符，随后输入

1	npm install -g cnpm --registry=https://registry.npmmirror.com

随后一个“/”开始旋转，等到安装成功的提醒出现后即可，然后输入

cnpm -v

进行检查，如果安装都正确，则会提示

3.Electron

安装

随后打开自己的项目文件夹，也就是和自己Tyrano启动器同一个目录的myprojec文件夹，在里面找到自己想要导出的项目文件夹，打开以后如下

(TyranoBuilder的是builder_config.json，TyranoStudio的是studio_config.json，不过影响不大)

我们这里只需要三个文件夹，也就是data、tyrano和index.html文件夹。

你可以选择直接在项目文件夹内进行打包，也可以选择新建一个文件夹(随便你建在哪里)，然后把这三个文件夹复制过去进行打包操作，我这里是把三个文件复制到了新的文件夹内。

我更推荐后者，因为打包会下载一些依赖，会使项目文件夹变得很臃肿。但如果你的游戏项目文件太大，比如你的游戏有3个G(万一呢)，移动耗时间且占空间的话，那也无所谓。

当你准备好以后，打开命令提示符，将目录移动到你要打包的项目内，就比如

1	cd D:\Download\dabao

不过命令提示符默认路径是在C盘，像我这种目录在D盘的，需要再输入

D:

将目录换到D盘内。

然后在这个路径下的命令提示符内输入

1	cnpm i -D electron

看到这样就算安装好了

同时，游戏目录变成这样

也就是多了一个package.json和node_modules文件夹

随后打开package.json文件，将里面的内容替换为

{
  "name": "your-app",        
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

这里可以将name后的your-app更改你自己游戏的名字，而version后的0.1.0可以改为自己的游戏版本号。

比如像我这样，将游戏名字改成了pvz，版本号改为了1.1.4(仅供示范

此处的version只能是三位数，1.1和1.1.4.5都不行。不过可以写预发布标签，预发布标签请见文章结尾的预发布标签一栏

{
  "name": "pvz",
  "version": "1.1.4",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

随后新建一个main.js，和其他文件一个目录

然后打开main.js文件，将里面的内容改为

const { app, BrowserWindow } = require("electron");

function createWindow() {

  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  win.loadFile("index.html");
  win.webContents.openDevTools();
}

app.whenReady().then(createWindow);

随后还是在命令提示符中，输入

npm start

随后如果提示(底下那些报错无关紧要)

并且的成功跳出游戏窗口则可继续下一步。

去除调试

不过此时游戏窗口会是这样的，顶上会有一排菜单栏，右边会有一个调试栏

一般用不到这两个功能，打包后的游戏也不可能把这两个的功能给玩家用，所以在上面main.js打包的时候，可以将


  win.loadFile("index.html");
  // 打开开发者工具
  win.webContents.openDevTools();
}

这部分的**win.webContents.openDevTools();整行删掉，或者在这行前面加上//**，将这行注释掉。

去除菜单栏

在代码**win.loadFile(“index.html”);，上面一行添加一行win.setMenu(null);**即可

1 2	win.setMenu(null); win.loadFile("index.html");

记得前面的缩进要和别的行对齐

去除掉这两个东西的话，就会变成正常的窗口了

3.Electron-Builder

随后还是在该目录的命令提示符内，输入

1	cnpm i -D electron-builder

安装Electron-Builder，这个就是主要用来打包的工具了

安装后以后，将

"scripts": {
  "start": "electron .",
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

写到package.json里。

完整package.json就应该是这样的

{
  "name": "pvz",
  "version": "1.1.4",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "devDependencies": {
    "electron-builder": "^26.0.12"
  }
}

然后在命令提示符内输入

1	npm run pack

然后会生成一个dist文件夹，你的游戏就在里面的win-unpacked文件夹内了。

然后你就可以改个文件夹的名字，然后压缩成zip上传到网络上了。

或者说你也可以输入

1	npm run dist

上面的npm run pack是单纯的打包为文件夹。

这个npm run dist则是在此基础上还会打包为各个系统的安装包，不过这里应该只会有windows的安装包，因为前面写package.js的时候没有指定target，不过也够用了。

4.其他设置

更改图标

这一步更改的是窗口的图标

在main.js文件的**win.loadFile(“index.html”);前添加一行win.setIcon(‘./ico.ico’);**即可

1
2
3

win.setIcon('./ico.ico');
win.setMenu(null);
win.loadFile("index.html");

这里的ico.ico可以随便命名，后缀支持ico，png和icns三个格式，没有大小限制，随后将图标放入项目文件夹即可，如下图

这一步更改的是程序的图标

首先打开package.json，添加

"build": {
  "win": {
    "icon": "./ico.ico"
  }
},

即可，完整代码如下

{
  "name": "pvz",
  "version": "1.1.4",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
    "win": {
      "icon": "./ico.ico"
    }
  },
  "devDependencies": {
    "electron-builder": "^26.0.12"
  }
}

不过注意，package.json的图标设置仅支持ico文件，并且仅支持256x256分辨率大小的ico文件。

如果出现了打包完后图标并没有变化的场景，请右键exe，选择“属性”，查看图标。

如果出现以上情况，那么则是缓存问题，通常重启Windows资源管理器或者重启电脑即可

如果属性也显示为默认图标，那么请检查图标文件的格式是否为ico，分辨率是否为256x256及以上。

预发布标签

预发布标签	中文名称	含义说明	示例
`alpha`	内测版	早期测试版本，功能不完整，存在大量错误	`1.0.0-alpha.1`
`beta`	公测版	功能相对完整，邀请用户测试，可能存在错误	`1.0.0-beta.2`
`rc`	发布候选版	功能完整，极可能成为正式版，进行最后测试	`1.0.0-rc.1`
`next`	下一版本预览	下一个大版本的早期预览，可能包含破坏性变更	`2.0.0-next.0`
`dev`	开发版	自动化构建版本，与特定代码提交关联	`1.0.0-dev.1234`
`canary`	金丝雀版	在小范围用户/环境中测试变更，用于A/B测试	`1.0.0-canary.456`
`preview`	预览版	功能预览，让用户提前体验新特性	`1.0.0-preview`
`snapshot`	快照版	指向最新开发状态（Maven常用）	`1.0.0-snapshot`
`unstable`	不稳定版	明确告知版本极不稳定，风险很高	`1.0.0-unstable`
`debug`	调试版	包含额外调试信息，性能非最优	`1.0.0-debug`
`experimental`	实验版	包含高度实验性功能，可能被移除	`1.0.0-experimental`
`edge`	前沿版	最前沿的开发状态，极不稳定	`1.0.0-edge`