一. 環境准備
我一直在探索Cocos H5正確的開發姿勢，目前做javascript項目已經離不開 nodejs、npm或grunt等腳手架工具了。
1.初始化package.json文件
npm init
當新建好cocos-js或creator項目，在項目根目錄使用npm init命令，一路回車，將在當前目錄創建package.json文件用於nodejs三方模塊的管理。關於npm的使用細節網絡上有很多教程，在此不用細說。
2. protobufjs模塊
本人最早在cocos2dx 2.x時代就開始用protobufjs模塊來操縱protobuf一直到現在。所以下面所有內容都是關於protobufjs在cocos creator中的使用，包括原生平台(cocos2d-js也是大同小異)。
安裝protobufjs到項目
npm install protobufjs@5 --save
使用npm install命令安裝模塊，注意我們這里使用的是protobufjs 5.x版本。 雖然protobufjs目前最新的 6.x版本，提供了ts、rpc等功能的支持，但有一個問題是在微信小游戲中不能動態加載proto文件。
安裝protobufjs到全局
npm install -g protobufjs@5
使用npm install -g 參數將模塊安裝到全局，目的主要是方便使用protobufjs提供的pbjs命令行工具。pbjs可以將proto原文件轉換成json、js等，以提供不同的加載proto的方式，我們可以根據自己的實際情況選擇使用。
二. protobufjs用法
下面是demo中定義的Player.proto文件的內容
syntax = "proto3";
package grace.proto.msg;
message Player {
uint32 id = 1; //唯一ID 首次登錄時設置為0，由服務器分配
string name = 2; //顯示名字
uint64 enterTime = 3; //登錄時間
}
關於proto具體語法細節這里就不多說了，我們重點如何將Player.proto文件中定義的Player對象在js中實例化、屬性賦值、序列化、反序列化操作。
1. 靜態語言中使用proto文件
在c++/java這類靜態語言中使用protobuf通常是使用官方提供的protoc命令將proto文件編譯成c++/java代碼，像下面這樣：
protoc --cpp_out=輸出路徑 xxx.proto
protoc --java_out=輸出路徑 xxx.proto
將輸出路徑的文件導入對應語言的工程中使用。
2. 在creator項目中使用proto文件
javascript是動態語言，可以在運行時產生對象，因此protobufjs提供了更為便捷的動態編譯，將proto文件中的對象生成js對象，下面簡要講解一下在creator中具體的使用步驟：
1.加載proto文件並編譯生成proto對象
//導入protobufjs模塊
let protobuf = require("protobufjs");
//獲取一個builder對象
let builder = protobuf.newBuilder();
//使用protobufjs加文件，並與一個builder對象關聯
protobuf.protoFromFile('xxx.proto', builder);
protobuf.protoFromFile('yyy.proto', builder);
...
let PB = builder.build('grace.proto.msg');
這步操作主要是使用protobufjs加載、編譯proto文件。
2.實例化proto對象與屬性賦值
let PB = builder.build('grace.proto.msg')
build函數返回值PB對象中將包含的是在proto中定義所有message對象，現在已經成為js對象，可以被實例化，代碼如下：
//實例化Player
let player = new PB.Player();
//屬性賦值
player.name = '張三';
player.enterTime = Date.now();
3.proto對象的序列化與反序列化
不說廢話，還是直接上代碼
...
//使用實例對象上的toArrayBuffer函數將對象序列化為二進制數據
let data = player.toArrayBuffer();
//使用類型對象上的decode函數將二進制數據反序列化為實例對象
let otherPlayer = PB.player.decode(data);
如果幸運你可以在web上使用protobuf了， 為什么只是在web上呢，當你把上面的代碼運行在jsb環境下的時候，你會體驗到悲催的事情正在發生。
三. 拯救cocos-jsb上的protobufjs
為什么在原生上運行就掛掉了呢？要理解這個問題需要對nodejs\ 瀏覽器\cocos-jsb這三個javascript的運行宿主環境有一定的了解。
我之前的文章提到過在選擇nodejs模塊時，要注意是否同時支持nodejs和web，只要是純js的模塊在cocos中一般都可以隨便用，比如async、undersocre、lodash等。
protobufjs這個模塊是可以很好的在瀏覽器和nodejs環境上運行的。但運行在cocos-jsb上就會出問題，首先我們要定位到出問題的關鍵代碼：
protobuf.protoFromFile('xxx.proto', builder);
1. 問題分析
從protobuf.protoFromFile函數名上看就知道是要進行文件的加載，一想到文件加載，就涉及到文件操作的api，我們來整理一下不同平台上的文件接口：
| 宿主平台 | 文件接口 | 說明 |
|---|---|---|
| 瀏覽器 | XMLHttpRequest | 瀏覽器中動態加載資源、文件等AJAX操作的基礎 |
| nodejs | fs.readFile / fs.readFileSync | nodejs上的文件操作模塊，底層由c/c++實現 |
| cocos-jsb | jsb.fileUtils.getStringFromFile | cocos-js提供的讀取文件內容接口，在不台平台（ios\android\windows）由不同底層api實現 |
看到這里相信很多人已經明白為什么在cocos-jsb上會有問題了，我們再來讀一下protobufjs源碼，證實下我們的分析。
2. 分析protobufjs源碼
找到protobufjs加載文件的主要代碼，下面我為源碼加上了注釋，請認真讀一下注釋內容：
Util.fetch = function(path, callback) {
//檢查callback參數，callback參數決定是否為異步加載
if (callback && typeof callback != 'function')
callback = null;
//運行環境是否為nodejs
if (Util.IS_NODE) {
//加載nodejs的文件系統模塊
var fs = require("fs");
//檢查是否有callback，存在使用fs.readFile異步函數讀取文件內容
if (callback) {
fs.readFile(path, function(err, data) {
if (err)
callback(null);
else
callback(""+data);
});
} else
//使用fs.readFileSync同步函數讀取文件內容
try {
return fs.readFileSync(path);
} catch (e) {
return null;
}
} else {
//當不為nodejs運行環境使用XmlHttpRequest加載文件
var xhr = Util.XHR();
//根據callbcak參數是否存在，使用異步還是同步方式
xhr.open('GET', path, callback ? true : false);
// xhr.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
xhr.setRequestHeader('Accept', 'text/plain');
if (typeof xhr.overrideMimeType === 'function') xhr.overrideMimeType('text/plain');
//通過XmlHttpRequest.onreadystatechange事件函數異步獲取文件數據
if (callback) {
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (/* remote */ xhr.status == 200 || /* local */ (xhr.status == 0 && typeof xhr.responseText === 'string'))
callback(xhr.responseText);
else
callback(null);
};
if (xhr.readyState == 4)
return;
//調用send方法發起AJAX請求
xhr.send(null);
} else {
////調用send方法發起AJAX請求，同步獲取文件數據
xhr.send(null);
if (/* remote */ xhr.status == 200 || /* local */ (xhr.status == 0 && typeof xhr.responseText === 'string'))
return xhr.responseText;
return null;
}
}
};
從上面的代碼可以看出protobufjs庫是為瀏覽器和nodejs准備的，根本就沒考慮過cocos-jsb的存在（吐槽：建議cocos官方提供的接口能模仿nodejs這樣能少很多事），所以要在cocos-jsb中使用protobufjs其中的一個辦法就是修改protobufjs的源碼，如下：
Util.fetch = function(path, callback) {
if (callback && typeof callback != 'function')
callback = null;
//將平台檢查代碼改為cocos提供的接口
if (cc.sys.isNative) {
//文件讀取使用cocos-jsb提供的函數
try {
let data = jsb.fileUtils.getStringFromFile(path);
cc.log(`proto文件內容: {data}`);
return data;
} catch (e) {
return null;
}
} else {
//web端無需修改，略
...
};
我們用cocos的接口將代碼修改一下，加載問題就被化解了，問題真的被解決了嗎？
不好意思，除了上面要代碼外還有一處代碼需要修改，源碼如下：
BuilderPrototype["import"] = function(json, filename) {
var delim = '/';
// Make sure to skip duplicate imports
if (typeof filename === 'string') {
//這里又出現了平台檢查
if (ProtoBuf.Util.IS_NODE)
// require("path")是加載nodejs的path模塊，resolve
filename = require("path")['resolve'](filename);
if (this.files[filename] === true)
return this.reset();
this.files[filename] = true;
} else if (typeof filename === 'object') { // Object with root, file.
var root = filename.root;
//這里還要修改
if (ProtoBuf.Util.IS_NODE)
root = require("path")['resolve'](root);
if (root.indexOf("\\") >= 0 || filename.file.indexOf("\\") >= 0)
delim = '\\';
var fname;
//這里還要修改
if (ProtoBuf.Util.IS_NODE)
fname = require("path")['join'](root, filename.file);
else
fname = root + delim + filename.file;
if (this.files[fname] === true)
return this.reset();
this.files[fname] = true;
}
...
}
這里我就不再貼修改代碼了，大家自行解決。
四 為protobuf繼續填坑
本來寫到這里，問題大多已經解決了， 但此時，如果你滿懷信心地使用改造后的protobufjs源碼，將你的代碼運行起來那一刻，我相信絕大多數人會一臉蒙逼。
媽的根本就不行！！看了好多字，好不容易讀到這里，不僅在模擬器上跑不起來，在web上同樣也跑不起來。
怎么辦，為了徹底解決問題，我還得繼續寫下去。
1. 了解creator動態加載資源的方法
請大家思考一個問題，creator項目中的一張圖片，在web與cocos-jsb上他們的文件路徑會一樣嗎？直接使用protobuf.protoFromFile('xxx.proto')去加載一個proto文件會成功嗎？
cocos文檔中說過要動態加載一個圖片資源需要將文件存放在assets/resources目錄下，使用如下方法加載：
cc.loader.loadRes('resources/xxx')
嘗試將proto文件存放在resources/pb/目錄下，用使用以下代碼：
protobuf.protoFromFile('resources/pb/xxx.proto')
同樣會得到失敗的提示，該如何辦呢？怎么才能獲得正確的資源路徑？
算了，不買關子了，寫累了直接出答案吧！
protobuf.protoFromFile(cc.url.raw('resources/pb/xxx.proto'));
cc.url.raw這個函數在瀏覽器、模擬器、手機上會返回不同的資源路徑，這才是真正的資源路徑，這下代碼應該可以正常運行起來了。
2. 更好的解決法辦
我一直在探索Cocos H5正確的開發方式，雖然通過修改protobufjs源碼的方法可以來解決在cocos-jsb上運行的問題，但這並不是唯一的解決方案。
如何在不修改protobufjs源碼的情況下讓代碼運行起來，以及使用pbjs工具預編譯proto文件為JSON和js文件的用法，請繼續觀注我的系列文章《當Creator遇上protobufjs》！
