项目打包

一、什么是项目打包？

项目打包是把开发的业务代码以及框架依赖统一打包，生成客户端或者浏览器版本所需要的文件；

• 客户端(electron)：打包会把业务代码以及框架依赖生成对应asar格式文件，再继续把asar格式的文件打包生成安装客户端所需要的exe文件；
• 浏览器(web)：打包会把业务代码以及框架依赖生成web所需要的文件夹，放到远程服务端；

二、项目打包形式有几种？

在项目开发中主要的本地打包形式有两种，分别是：

• 手动打包：根据项目中的package.json中的打包命令手动执行打包任务
• 一键打包：根据项目根目录中的bin目录下编写的一键打包脚本electron.bat/web.bat执行打包命令

三、手动打包跟一键打包的区别以及各自优势？

手动打包与一键打包的区别与各自优势在于更改需要打包的模块数量，更改少量模块时建议用手动打包，节省时间减少误操作的可能。当更改多个模块时建议用一键打包脚本，节省时间以及减少遗漏。

• 手动打包：当需要更改客户端或者浏览器版本其中少数业务或者框架模块时，建议采用手动打包模式。节省时间以及更便利；
• 一键打包：当需要更改客户端或者浏览器版本涉及到多个业务模块或者框架模块时，建议采用一键打包模式。节省时间同时减少遗漏；

注：当项目存在多应用时，每次手动打包需要在命令行依次输入打包命令，这种情况会让打包变得很繁琐并且很容易出现遗漏其中某个应用，而一键打包只需要在bin目录下的electron.bat/web.bat脚本中依次编写好打包每个应用的命令，只需要点击执行即可。

四、如何手动/一键打包？

4.1 手动打包

_
在每个项目根目录中有package.json文件，其中包含了项目的打包命令，需要在命令行执行相应的打包命令.把业务以及框架的模块打包成asar文件

• 整体electron&web版本打包：npm run build；
• 只打包electron版本：npm run build:electron;
• 只打包web版本：npm run build:web;

注：打包以后的文件在对应的dist的目录下对应的electron/web文件中，会有打包好的asar文件；

4.2 一键打包

_
项目支持手动打包的同时，也支持编写打包脚本一键打包，当项目属于多应用时，手动每个应用打包时会很繁琐同时也可能会有遗漏，所以提供支持一键打包脚本，在项目组根目录bin文件中有对应的electron.bat/web.bat脚本文件，以quickstart示例项目的electron.bat为范，配置文件如下：

• 首先需要把项目中每个应用模块依次添加，如quickstart中的examples应用：

echo [INFO] 开始构建执行
cd ../examples                       //选择打包的模块路径
echo [INFO] 开始打包examples模块...
call yarn install                     //更新依赖
echo [INFO] 更新依赖完成,开始编译...
call npm run build:electron            //执行打包命令
echo [INFO] 构建打包examples.asar完成...

注：打包每个应用前建议更新依赖执行yarn install/npm install,然后执行打包命令npm run build:electron

• 其次配置项目中需要打包app模块、electron模块、theme模块、@erayt/erayt-electron-prebuilt模块；

app模块：

cd ../tool/app/electron/app
echo [INFO] 开始更新tool/app/electron/app模块依赖包...
call yarn install
echo [INFO] 更新依赖完成...
cd ..
echo [INFO] 更新tool/app/electron模块依赖包...
call yarn install
echo [INFO] 更新依赖完成,开始编译...
call npm run build
echo [INFO] 构建打包app.asar完成...

theme模块：

cd ../../theme/electron
echo [INFO] 开始构建执行theme模块...
call yarn install
echo [INFO] 更新依赖完成,开始编译...
call npm run build
echo [INFO] 构建打包theme.asar完成...

erayt依赖模块：

cd ../../electron
echo [INFO] 开始更新@erayt/erayt-electron-prebuilt依赖包...
call yarn install
echo [INFO] 所有模块编译完成,输出到目录dist/electron,构建结束.

整体electron.bat文件：

@echo off
cd %~dp0
echo [INFO] 开始构建执行
cd ../examples                        
echo [INFO] 开始打包examples模块...
call yarn install                     
echo [INFO] 更新依赖完成,开始编译...
call npm run build:electron           
echo [INFO] 构建打包examples.asar完成...
echo [INFO] 开始构建执行app模块...
cd ../tool/app/electron/app
echo [INFO] 开始更新tool/app/electron/app模块依赖包...
call yarn install
echo [INFO] 更新依赖完成...
cd ..
echo [INFO] 更新tool/app/electron模块依赖包...
call yarn install
echo [INFO] 更新依赖完成,开始编译...
call npm run build
echo [INFO] 构建打包app.asar完成...
cd ../../theme/electron
echo [INFO] 开始构建执行theme模块...
call yarn install
echo [INFO] 更新依赖完成,开始编译...
call npm run build
echo [INFO] 构建打包theme.asar完成...
cd ../../electron
echo [INFO] 开始更新@erayt/erayt-electron-prebuilt依赖包...
call yarn install
echo [INFO] 所有模块编译完成,输出到目录dist/electron,构建结束.

五、如何打包exe安装包

针对安装客户端我们需要把本地打包好的asar文件继续打包成exe安装文件，具体步骤如下：

• 在项目根目录setup文件中找到Titan_Setup.iss文件，
• 在文件中找到【Files】模块，然后像Files中添加代码，如果你的项目存在多应用，则需要依次添加，同时也需要添加app、theme、erayt等模块相关的asar，格式如下：参数介绍
  | 配置项 | 说明 | | —- | —- | | Source | 本地项目存放asar的路径 | | DestDir | 打包成exe以后存放asar的路径 | | CopyMode | 默认alwaysoverwrite |

[Files]
  Source: "../dist/electron/quickstart.asar"; DestDir: "{app}/resources" ;CopyMode:alwaysoverwrite
  Source: "../dist/electron/quickstart2.asar"; DestDir: "{app}/resources" ;CopyMode:alwaysoverwrite
  Source: "../dist/electron/app.asar"; DestDir: "{app}/resources" ;CopyMode:alwaysoverwrite   
  Source: "../dist/electron/theme.asar"; DestDir: "{app}/resources" ;CopyMode:alwaysoverwrite

• 而version.json以及init.json配置文件相关则需要放在app.asar.unpacked目录下，格式如下：

[Files]
Source: "../dist/electron/app.asar.unpacked/*"; DestDir: "{app}/resources/app.asar.unpacked";CopyMode:alwaysoverwrite

• 以上Titan_Setup.iss文件配置好以后，需要用inno Setup 5软件打开 然后点击上面工具栏中的build点击开始构建，构建成功以后会在根目录setup文件下output文件中可以查看到打包好的exe文件；

注：更改客户端的图标可以更改setup文件下的logic.ico；