摘要:因為放棄對的維護而又一次火熱起來。流行的解決方案就是用。有中使用方式,實時解析方式解析方式靜態代碼方式事先導出的文件。早已有很多解決方案。好了,現在就可以在項目中使用的代碼了輸出
H5因為Adobe放棄對Flash Player的維護而又一次火熱起來。
目前有laya和egret兩個H5游戲引擎,支持AS3、TS、JS三種語言開發。
用H5開發游戲,繞不開與服務器的傳輸。流行的解決方案就是用protobuf。而JS也有protobuf。我的項目用的是Laya引擎的TS版本,可惜搜索整個網絡還沒找到TS版本的protobuf,只好用JS版本的了。
protobufjs有3中使用方式,實時解析方式、json解析方式、靜態代碼方式(事先導出proto的js文件)。
那么三種方式,可想而知,靜態代碼執行速度最快,并且可以直接訪問到proto中定義的字段,不需要用字符串來傳字段名字。這樣也可以保證對proto取值賦值時不會出現拼寫錯誤,也不需要記住字段的名字。
有個專門的工具鏈接可以把.proto文件導出.js文件以及對應的.d.ts文件。
首先安裝Node.js
然后,安裝protobufjs:
npm install protobufjs
裝完以后,可以用命令導出.js文件和.d.ts文件
pbjs -t static-module -w commonjs -o joengProto.js joengProto.proto pbts -o joengProto.d.ts joengProto.js
第一行導出js文件,第二行把導出的js生成對應的.d.ts文件,這樣就可以在TS代碼中調用了。
-t -static-module參數,表示選的是靜態代碼模式。
-w commonjs表示用什么標準來輸出js代碼,有各種比如es2015、es5、umd、amd什么的,然而我對js不太熟悉,總之只有commonjs可以執行成功,其他都會報錯什么的。
好了,導出成功了。但代碼卻執行不了,要么什么反應都沒有,要么報一些奇怪的錯:
unexpected token import
問題是什么呢?找了很多資料,也不知道什么問題,但沒頭沒腦地看了很多文章以后,也差不多想到大概是什么問題了。
由于TS/JS項目會用到各種第三方JS類庫,而這些類庫所用的標準各不相同,有的是ES5的有的是ES6的、commonJSd的,而你自己的項目可能是ES5的也可能是ES6的等等。而ES5是不支持import和export的,而es6呢,很多瀏覽器還不支持這個標準。
那么問題來了,js三方庫最令人頭疼的就是各種庫標準不一致,想要共存于一個項目,怎么辦呢?順著這個思路想,應該是把生成的js的代碼轉成兼容各種標準。
早已有很多解決方案。由于找到大神阮一峰的一個文章詳細介紹了怎么用babel,所以我選了babel。Babel 入門教程
按照上面鏈接的內容,很快就可以把proto導出的代碼轉換標準了。然而依然不行,因為babel不會自動轉換export和import,而我的代碼運行不了主要就是這兩個關鍵字的問題。繞了一圈等于白搞了。。。
好在只需要安裝一個插件就可以轉export和import了。
安裝babel
npm install babel
安裝插件
npm install --save-dev babel-plugin-add-module-exports
IDE中,在項目根目錄建一個文件 .babelrc
注意是你的項目的根目錄,不是babel的也不是node的。
內容如下:
{ "presets": [ "es2015" ], "plugins": [ "add-module-exports" ] }
再次執行命令
babel proto/joengProto.js -o proto/joengProto.js
查看生成的joengProto.js文件,已經沒有import和export關鍵字了。
好了,現在就可以在TS項目中使用proto的JS代碼了
import awesome = require("../proto/joengProto"); class MyTest { constructor() { console.log("---start---"); var cls = awesome.awesomepackage.AwesomeMessage; let msg:awesome.awesomepackage.AwesomeMessage = cls.create(); msg.awesomeField = "12345"; msg.num = 20; console.log(msg.num); } } new MyTest();
輸出:
---start--- 20
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92421.html
摘要:涉及到計算機基礎知識,例如字節緩沖大小端等。是指用多少位表示的整數,例如就是用位即一個字節表示的整數,二進制范圍是,對應的十進制就是。開發時通訊雙方或者多方終端都遵循協議。 這里記錄了使用 protobuf 協議與服務端數據交互的相關內容和知識。涉及到計算機基礎知識,例如字節、buffer 緩沖、大小端等。 字節 / Byte 1 字節代表了 8 位(bit)二進制,1 位就是 0...
摘要:呵呵呵打印出來的是二進制流需要進行化然后給前端。不然的話瀏覽器會自動解析成文字的前端需要進行接受二進制流先引入文件以及插件前端用請求的路由,在回調函數里的為后端的返回值。 protobuf介紹 由于網上關于protobuf的交互的資料比較零散,所以自己整理了一下關于protobuf前后端交互的資料,以作參考。 Google Protocol Buffers 簡稱 Protobuf,它提...
摘要:通過類庫提供的和分別執行序列化和反序列化,而不用依賴任何生成的代碼。只針對平臺的話,不需要文件就可以應用序列化協議。前一篇文章我們看到使用Google.Protobuf有諸多不便(參考《如何在C#中使用Google.Protobuf工具》),這次我們來看看另一個工具的使用體驗。相關資料、鏈接:github項目:https://github.com/protobuf-net/protobuf-...
閱讀 2973·2023-04-26 02:29
閱讀 585·2019-08-30 15:54
閱讀 1658·2019-08-29 13:13
閱讀 601·2019-08-28 17:51
閱讀 2722·2019-08-26 13:58
閱讀 1532·2019-08-26 13:27
閱讀 2820·2019-08-26 11:39
閱讀 3445·2019-08-26 10:46