前端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
官方文档:https://nwjs.org.cn/doc/user/Package-and-Distribute.html