基於vue-cl+carefree的web真機測試解決方案

 

背景

互聯網移動端的真機測試通常是讓開發人員感到非常頭痛的一件事情，不僅是因爲移動端測試中各個型號手機兼容性的多樣性，還有測試低效的問題。傳統的移動端測試流程如下:

抓包定位→開發人員修改代碼→上傳代碼管理器→測試服務器jenkins打包構建→通過手機訪問測試

乍看整個流程很連貫，但仔細分析後卻極爲低效，每一個細小甚微的諸如css改動都需要經過jenkins重新構建後纔可以呈現在手機上。如果開發人員有jenkins權限可以直接構建且jenkins前後端分離互不影響浪費時間尚且可以接受，但是如果沒有權限需要通知測試人員，又增加了額外的溝通成本，極爲低效。

所以，jenkins固然是個自動化利器，但是在移動端測試開發階段,jenkins的存在大大增加了開發成本。

爲了提升開發效率，在不使用jenkins的同時進行高效開發測試，使用電腦發射wifi到手機讓其之間可以互訪是一個簡便的方式，但發射wifi熱點繁瑣且不穩定，也會影響工作效率，部分互聯網公司也禁止員工私自發射WIFI。

今天在這裏爲大家介紹一個不依賴Wifi熱點的移動web真機測試解決方案(Carefree)

解決方案

Carefree方案有兩部分組成，分別是“服務端Whistle”和一個webpack插件。webpack插件主要用來解決手機訪問開發電腦本地項目文件的問題，而除此以外的調試問題基本都可以通過“服務端Whistle”解決。

廢話不多說，解決步驟大體如下:

1.服務端安裝nodejs

2.服務端安裝Whistle

3.服務端啓動whistle

4.在手機中配置代理

5.webpack安裝整合carefree插件

實施方案

找一臺手機和電腦都可以訪問的內網服務器

1. 服務端安裝Node

• Windows或Mac系統，訪問https://nodejs.org/，安裝LTS版本的Node，默認安裝即可。
• Linux下推薦使用源碼安裝: 從Node官網下載最新版的Source Code(或者用wget命令下載)，解壓文件(tar -xzvf node-vx.y.z.tar.gz)後進入解壓後的根目錄(node-vx.y.z)，依次執行./configure、./make和./make install。

安裝完Node後，執行下面命令，查看當前Node版本

$ node -v
v10.15.3

2.服務端安裝whistle

Node安裝成功後，執行如下npm命令安裝whistle （Mac或Linux的非root用戶需要在命令行前面加sudo，如：sudo npm install -g whistle）

$ npm install -g whistle

 whistle安裝完成後，執行命令 whistle help 或 w2 help，查看whistle的幫助信息

如果能正常輸出whistle的幫助信息，表示whistle已安裝成功。如果不能需要添加 whistle的環境變量,linux下修改etc/profile文件，加入如下內容:

例：export PATH=$PATH:/zywa/soft/node-v8.11.4-linux-x64/bin/w2

然後運行命令  source /etc/profile  刷新linux環境變量

3. 啓動whistle

啓動whistle:

$ w2 start

Note: 如果要防止其他人訪問配置頁面，可以在啓動時加上登錄用戶名和密碼 -n yourusername -w yourpassword。

重啓whsitle:

$ w2 restart

停止whistle:

$ w2 stop

 4. 在手機中配置代理

   運行命令w2 start啓動剛剛配置whistle的服務端，然後手機連接公司內網wifi設置代理如下圖所示:

 

代理設置中服務器爲剛纔配置whistle的服務器ip,端口爲8899

 5. 配置carefree

大致工作原理如下：

1. 修改webpack部分配置，以監聽模式（watch mode）啓動編譯，並將編譯後的文件自動上傳到內網服務器(解決手動上傳不便的問題)
2. 終端（命令行界面）打印出頁面入口地址和二維碼，手機掃碼即可訪問（解決手機錄入地址不便的問題）

1. 監聽文件變化，一旦保存修改，增量編譯（解決全量編譯速度慢的問題）
2. 將編譯後且有變化的文件增量上傳到內網服務器（解決全量上傳速度慢的問題）

1. 在手機上刷新頁面或重新掃碼即可看到變化

 步驟

1. 使用npm安裝carefree插件 npm install @nutui/carefree --save-dev 

2.修改package.json文件，在scripts 字段中新增一個命令,如:

"scripts": {
   "build:dev": "cross-env NODE_ENV=carefree carefree_env=dev node build/build.js"
}

3.修改webpack配置文件webpack.prod.js

//引入插件
const Carefree = require('@nutui/carefree');
 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
    new Carefree({
      justUseWifi: false,   //是否用wifi
      publicPath: "//172.10.4.76/" + packageJson.name + "/",  //上傳成功後返回的二維碼頁面地址
      ssh: {
            host: "172.10.4.76",          //服務器ip
            port: 22,                     //服務器端口
            username: "user",             //服務器用戶名
            password: "password!!!",      //服務器密碼  
            source: "dist",               //上傳的構建目錄
            target: `/zywa/nginx/html/app`  //服務器上傳位置
            }
    })
  ]);

 如果出現上傳失敗的情況，請在服務器提前建立好構建目錄dist中的相關文件夾，或者運行命令安裝 

npm install @nutui/carefree --save-dev 

修改上面的代碼爲

//引入插件
const Carefree = require('@nutui/carefree');
const WebpackUploadPlugin = require("webpackUploadPlugin");
 webpackConfig.plugins = (webpackConfig.plugins || []).concat([
   new WebpackUploadPlugin({
      source: "dist",      //上傳的構建目錄
      ignoreRegexp: /node_moudles/,      //忽略的目錄
      sftpOption:  {
            host: "172.10.4.76",          //服務器ip
            port: 22,                     //服務器端口
            username: "user",             //服務器用戶名
            password: "password!!!",      //服務器密碼  
            target: `/zywa/nginx/html/app`  //服務器上傳位置
            }
    }),
    new Carefree({
      justUseWifi: false,   //是否用wifi
      publicPath: "//172.10.4.76/" + packageJson.name + "/",  //上傳成功後返回的二維碼頁面地址
      ssh: {
            host: "172.10.4.76",          //服務器ip
            port: 22,                     //服務器端口
            username: "user",             //服務器用戶名
            password: "password!!!",      //服務器密碼  
            source: "dist",               //上傳的構建目錄
            target: `/zywa/nginx/html/app`  //服務器上傳位置
            }
    })
  ]);

 4.執行npm run build:dev

構建並上傳完畢之後終端會打印出入口頁面地址的二維碼，手機（連公司內網）掃碼即可訪問。

參考文章: http://jdc.jd.com/archives/category/5-frontend

demo cli: https://www.npmjs.com/package/chigua-cli