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