一些需要了解的歷史與特性，其實就是 NW.js 和 Electron 的爭議，建議還是親自閱讀一下各自的官網說明
1、下載SDK版工具
從淘寶NPM鏡像下載，速度飛快，我選擇最新的 https://npm.taobao.org/mirrors/nwjs/v0.41.2/nwjs-sdk-v0.41.2-win-x64.zip 版本，對應 Chromium 77 + Node 12.9.1
然后就可以按照官網快速入門例子，就像構建一個Node項目一樣從package.json起手，首先構建一個靜態頁面的應用。
2、編輯源文件
准備好package.json和index.html兩個文件
{ "name": "helloworld", "main": "index.html" }
注意：Windows系統的默認編碼是GBK，而我們經常寫代碼用的是UTF-8（VS除外），這里index,html的編碼格式就得改一改了，否則就像CMD黑窗口一樣，UTF-8中文顯示亂碼
<!DOCTYPE html>
<html>
<head>
<title>Hello World-這是標題!</title>
</head>
<body>
<h1>Hello World-這是正文!</h1>
</body>
</html>
3、運行應用
在這之前，我先配置一下環境變量，當然你也可以直接把應用拖到解壓后的 nwjs-sdk-v0.41.2-win-x64 目錄下去運行，不過作為一個balabalabala...，我還是要配個SDK的環境變量，就可以在別的目錄下寫應用代碼了
注意：准備好靜態文件，配好環境變量后要開始運行應用了，這里用的是你的應用的整個目錄，而不是package.json或index.html某個文件，效果如下
4、打包應用
參考 https://www.jianshu.com/p/3337701f9b80，或者手動打包 https://www.cnblogs.com/sener/p/8366164.html
這個比較坑，方式有好幾種，這里選擇推薦的 nwjs-builder-phoenix 工具打包，試了幾次才成功
首先需要把package.json文件補全
{ "name": "helloworld", "version": "0.1.0", "description": "this is first nw app", "main": "index.html", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dist": "build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .", "start": "run --x64 --mirror https://npm.taobao.org/mirrors/nwjs/ ." }, "author": "jxh", "license": "ISC", "build": { "nwVersion": "0.41.2" }, "dependencies": {}, "devDependencies": { "nwjs-builder-phoenix": "^1.15.0" }, "window": { "title": "hello nw", "width": 840, "height": 600, "toolbar": true, "resizable": false, "icon": "./hello.png" } }
前面的名稱，版本，描述不用多說，mian是應用入口，參照官網說明
scripts是打包腳本，參照 https://github.com/evshiron/nwjs-builder-phoenix 說明，里面有個配置例子 https://github.com/evshiron/nwjs-builder-phoenix/blob/master/assets/project/package.json
--tasks win-x64 是需要打包生成的的平台文件，可以一次性打包其他平台的，用 , 隔開，比如win-x86
--mirror https://npm.taobao.org/mirrors/nwjs/ . 是下載nwjs的鏡像地址
window是應用窗口的一些配置
打包的時候直接運行 npm run dist 開始打包，就會生成所有文件了，運行結果如下，其實就是自動下載NWjs，然后把源文件copy到dist下
PS E:\Code\NW_Learn\01_HelloWorld> npm run dist > helloworld@0.1.0 dist E:\Code\NW_Learn\01_HelloWorld > build --tasks win-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ . Starting building tasks... { tasks: [ [ 'win', 'x64' ] ], concurrent: false } Building for win, x64 starts... Fetching NW.js binary... { platform: 'win', arch: 'x64', version: '0.41.2', flavor: 'normal' } [==================================================] 6002.55KB/s 0.0s Building targets... Building directory target starts... Building directory target ends within 11.59s. Building for win, x64 ends within 28.89s. PS E:\Code\NW_Learn\01_HelloWorld>
然后在當前目錄下生成 dist/helloworld-0.1.0-win-x64目錄
點擊helloworld.exe就可以執行了，查看其詳細信息，就是配置的那些
5、遇見的坑
5.1 不要使用 cnpm 安裝nwjs-builder-phoenix，我的好像莫名的多下了一些依賴文件，然后打包的時候發生了莫名的化學反應，導致node_modules變成了1.3G，還自動把 node_modules 復制到 dist 下去了，然后打包出來的是個巨大的廢包，還是手動 npm config set registry https://registry.npm.taobao.org 設一下鏡像吧
5.2 千萬不要把這句話抄過來，否則生成好幾個平台的目錄可慢了
"dist": "build --tasks win-x86,win-x64,linux-x86,linux-x64,mac-x64 --mirror https://dl.nwjs.io/ .",
5.3 這個生成壓縮文件的也還是不要選了
"targets": [ "zip", "nsis7z" ]
5.4 可能是由於 5.1 的原因，我打包一直生成一對廢品，后來刪了 node_modules重新用npm安裝，再打包就好了
6、一些說明
就一個helloworld，打包后的文件夾有211M，壓縮后63M，是因為這東西就是個Chrome瀏覽器
不推薦將整個應用打包為一個exe文件，雖然看起來逼格高一點，但是不好更新
7、Electron
又試了試electron，文檔確實比NWjs齊全很多，起手也非常簡單
7.1、開始構建
GitHub提供了簡單的 QUICK-START 項目，首先從 https://github.com/electron/electron-quick-start 把代碼下下來
然后在目錄下 npm install 安裝依賴
然后 npm start 啟動就可以了
這個不會中文亂碼，不需要改GBK
7.2、打包
參照 Electron桌面應用打包流程 和 官網打包教程
7.3、補充說明
GitHub上Electron主要有三個部分
electron: 項目源碼
electron-quick-start: 快速構建示例
electron-api-demos：api演示程序，配合上quick-start用來試驗非常友好，要注意的一點是這個項目下下來后 npm install 可能會卡在下載依賴的地方不動了，因為他自己依賴了 electron-download 模塊，該模塊會自己從GitHub上去下載electron的源碼，而不是用npm，所以要是卡住了可以直接ctrl+c終止，然后手動 npm install electron就可以了，或者直接用cnpm install也可以一次性通過，不過不建議這么做（打包可能出問題）。