前端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