前端web项目打包（二）

项目背景：某项目需要，找了网上的一个大数据的模板做了一个人模人样的前端。用了一些Echarts的东西，项目的GPU使用率很高，CPU占用率也不小。现要求将项目demo打包发布出来，代码什么的全部隐藏掉，发布出一个桌面应用程序。

项目结构如下图：

 打包项目使用的工具：nwjs（链接：https://nwjs.org.cn/）

第一步准备打包工具：

下载nwjs工具，官方提供的有两个版本，一个是正常版本一个是SDK版本，SDK版本的nwjs比正常版本的多了几个调试工具，建议使用SDK版本的nwjs。我使用的是v0.50.0版本64位的nwjs。

 

点击sdk版本的nwjs，下载压缩文件到桌面（建议打包过程在C盘下进行，桌面最好）。解压缩，如下：

 

 

 

 

至此，nwjs工具就已经准备好了，下面可以进入打包过程。

 

 第二步，学习打包工具的使用；

官方使用文档：https://nwjs.org.cn/doc/index.html；（我只学了这俩）

 

 

 在nw.exe同级目录下新建文件夹src，用于存放项目工程文件;

 

 

 win+R打开命令行，切换到当前nw.exe所在的路径下；

 

 

 

创建 package.json:

{
  "name": "helloworld",
  "main": "index.html"
}

在命令行输入：nw src

src是项目所在的路径，如下

 

 

 

 

执行完之后，会弹出一个桌面窗口，如下

第三步，开始打包

下载一个解压缩工具：7z(https://sparanoid.com/lab/7z/)

注意不能使用winRAR解压缩工具，最好使用7Z，除了这俩别的我没试过。

我选的是这个：

 

 

 将src下的所有文件压缩到src.zip，然后将src.zip重命名为src.nw

 

 

 

然后，将src.nw移动到nw.exe同级路径下。

在命令行下输入：（注意，这一步最好在控制台命令行格式下进行，在powerShell下这条指令无法识别）

copy /b nw.exe+package.nw app.exe

 

 

 

 

 这个app.exe就是打包的桌面应用程序，现阶段可以在当前路径下运行，已经拜托了对src项目文件的依赖，但对同级目录下的一些文件还是有依赖。

如果有需要可以使用打包工具：Enigma Virtual Box

这个工具的使用可以参考：https://www.jianshu.com/p/4ef35c300596

前面的打包过程也可以参考这篇文档。

在使用enigma virtual box的过程中，需要将以下文件全部导入

 

 参考文章：https://www.jianshu.com/p/4ef35c300596

官方文档：https://nwjs.org.cn/doc/user/Package-and-Distribute.html