大家好，又見面了，上一篇我們介紹瞭如何在Egret中使用Protobufjs。
至於爲什麼選protobufjs，請點擊這裏閱讀我上一篇文章
這篇我們重點介紹，如何在Layaair的TS項目中使用它。
首先，因爲我用的是ts版本創建的項目。所以能和Egret一樣使用。
只是配置有所區別。
如何安裝
-
npm install [email protected] -g -
npm install @egret/protobuf -g
如何使用
-
# 假設用戶有個名爲 egret-project 的白鷺項目(PS：laya項目也一樣，這個名字不重要) -
cd egret-project -
# 將代碼和項目結構拷貝至項目中 -
pb-egret add -
# 將 protofile 文件放在 egret-project/protobuf/protofile 文件夾中 -
pb-egret generate -
# 文件將會生成到 protobuf/bundles 文件夾中
由於是Layaair的ts項目，當執行 pb-egret add 的時候，會提示不是Egret的項目。
不要緊，不用理會，它還是會照樣生成幾個文件夾的。
就是protobuf文件夾。
然後，把tsconfig.json改動一下，引入生成的ts文件。
"include": [
"src",
"libs",
"protobuf/**/*.d.ts"
],
注意粗體部份，是我們增加的。
然後修改index.html文件，引入js。
<script type="text/javascript" src="../protobuf/library/protobuf-library.js"></script>
<script type="text/javascript" src="../protobuf/bundles/protobuf-bundles.js"></script>
注意粗體部份，是我們增加的。（由於csdn的編輯功能有BUG加粗會產生html代碼，汗~）
準備工作完成！
接下來我們嘗試編寫一個awesome.proto文件，然後放到protobuf/protofile目錄下，執行命令pb-egret generate。
這樣就會生成對應的js和d.ts文件了。
-
// awesome.proto -
package awesomepackage; -
syntax = "proto3"; -
message AwesomeMessage { -
string awesome_field = 1; // becomes awesomeField -
}
我們在代碼中調用它，發現有代碼提示（ts）。
-
let ptest = new awesomepackage.AwesomeMessage(); -
console.log(ptest);
調試，輸出正常！調用成功！
至於protobufjs的API可以前往官網查閱！
說實話，網上關於如何在h5的typescript也就是ts項目中正確的使用protobuf的資料基本等於零。
ps: 更正一下，靜態生成js的方法等於零，動態load原始proto文件的方法滿天飛。
我抽空寫了這個，方便自己以後備用，同時也爲了方便大家查閱。
有問題可以留言給我，謝謝~
有很多人看了文章，依然不會弄，說報錯。
我把項目源碼傳上來了，大家對比看看是哪裏沒弄對。
【項目源碼下載】https://download.csdn.net/download/sjt223857130/10445675
--------------------- 本文來自 sjt223857130 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/sjt223857130/article/details/79658158?utm_source=copy