Solutions using protobuf in TS projects

H5 because Adobe Give up right Flash Player The maintenance of the is hot again .
There are laya and egret Two H5 The game engine , Support AS3、TS、JS Three languages development .
use H5 Game development , Cannot bypass the transmission with the server . The popular solution is to use protobuf. and JS Also have protobuf. My project uses Laya Engine TS edition , Unfortunately, the search for the entire network has not found TS Version of protobuf, I have to use JS Version of .

protobufjs Yes 3 Use in , Real time parsing 、json Analytical way 、 Static code mode （ Pre export proto Of js file ）.
So three ways , As one can imagine , Static code is the fastest to execute , And you can directly access proto Fields defined in , There is no need to pass the field name in a string . This will also ensure that proto There will be no spelling errors when assigning values , You don't need to remember the name of the field .

---

There is a special tool link You can put .proto File export .js And the corresponding files .d.ts file .
First installation Node.js
then , install protobufjs：

npm install protobufjs

After loading , You can export with the command .js Document and .d.ts file

pbjs -t static-module -w commonjs -o joengProto.js joengProto.proto
pbts -o joengProto.d.ts joengProto.js

The first line exports js file , The second line exports js Generate corresponding .d.ts file , So you can do it TS The code is called. .
-t -static-module Parameters , Indicates that the static code mode is selected .
-w commonjs Indicates what standard is used to output js Code , There are various, such as es2015、es5、umd、amd What? , But I'm right js Not very familiar with , In short, there is only commonjs Can be executed successfully , Others will report errors .

---

Okay , Export succeeded . But the code doesn't execute , Or nothing happens , Or report some strange mistakes ：

unexpected token import

What's the problem ？ I found a lot of information , I don't know what the problem is , But after reading a lot of articles without a clue , I almost thought about what the problem was .

because TS/JS Various third parties will be used in the project JS Class library , The standards used by these libraries are different , There are plenty of them ES5 Yes, there are ES6 Of 、commonJSd Of , Your own project may be ES5 It may also be ES6 Of, etc. . and ES5 It is not supported import and export Of , and es6 Well , Many browsers do not support this standard yet .
So here comes the question ,js The most troublesome thing about the three-party libraries is that the standards of various libraries are inconsistent , Want to coexist in one project , What shall I do? ？ Follow this line of thinking , It should be generated js The code is converted to be compatible with various standards .

There are already many solutions . An article by Ruan Yifeng, the great God, introduced how to use it in detail babel, So I chose babel.Babel Introductory tutorial

---

Follow the link above , It will soon be possible to proto Exported code conversion standard . But still not , because babel No automatic conversion export and import, The main reason why my code can't run is the two keywords . It's useless to go around ...
Fortunately, you only need to install a plug-in to transfer export and import 了 .
install babel

npm install babel

Installing a plug-in

npm install --save-dev babel-plugin-add-module-exports

IDE in , Create a file in the project root directory .babelrc
Note the root directory of your project , No babel It's not node Of .
The contents are as follows ：

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "add-module-exports"
  ]
}

Execute command again

babel proto/joengProto.js -o proto/joengProto.js

View the generated joengProto.js file , No more import and export Keyword. .
Okay , Now it can be in TS Project use proto Of JS Code.

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();

Output ：

---start---
20