TS項目中使用Protobuf的解決方案

H5由於Adobe放棄對Flash Player的維護而又一次火熱起來。
目前有laya和egret兩個H5遊戲引擎，支持AS三、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代碼，有各類好比es201五、es五、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