基于Typescript的Vue项目中使用protobuf

简介

使用基本上与脚手架vue-cli2.x搭建的项目中使用protobuf的使用方法相同

具体参考：Vue项目中使用protobuf

本文只列出有区别的地方

proto.js

Typescript中直接引用生成的src/proto/proto.js文件，会报错误。我们需要给这个文件写一个声明文件

• 修改package.json文件，添加proto命令（这是生成src/proto/proto.js文件的命令）

{
  // ...
  "scripts": {
    // ...
    "proto": "pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto",
    // ...
  },
  // ...
}

• 修改package.json文件，添加protots命令（这是生成声明文件的命令）

{
  // ...
  "scripts": {
    // ...
    "proto": "pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto",
    "protots": "pbjs -t static-module src/proto/*.proto | pbts -o src/proto/bundle.d.ts -",
    // ...
  },
  // ...
}

• 当proto文件有修改时，将所有的proto文件复制到src/proto/目录，

• 然后执行命令npm run proto生成src/proto/proto.js文件，

• 然后再执行命令npm run protots生成Typescipt需要的声明文件src/proto/bundle.d.ts

• 修改src/types/global.d.ts文件（代码中引用proto.js时，这么引用import protoRoot from '@/proto/proto'）

// ...
declare module '@/proto/proto'
// ...

yaml文件

yaml文件在vue-cli2.x搭建的项目中是通过yaml-loader处理的

这里换一种方式：使用js-yaml将yaml文件转成json文件，项目中引入生成json文件

• 在src/api/目录下新建yamltojson.js文件

const yaml = require('js-yaml')
const fs = require('fs')
const path = require('path')

tranformBuf()
tranformTcp()

function resolve (dir) {
  return path.join(__dirname, dir)
}

function tranformBuf() {
  try {
    var data = yaml.safeLoad(fs.readFileSync(resolve('protobuf.yaml'), 'utf8'));
    // let str = JSON.stringify(data)
    let str = JSON.stringify(data, "", "\t")
    fs.writeFile(resolve('protobuf.json'), str, 'utf8', function(err) {
      if (err) throw err
    })
  } catch (e) {
    console.log(e)
  }
}

function tranformTcp() {
  try {
    var data = yaml.safeLoad(fs.readFileSync(resolve('prototcp.yaml'), 'utf8'));
    // let str = JSON.stringify(data)
    let str = JSON.stringify(data, "", "\t")
    fs.writeFile(resolve('prototcp.json'), str, 'utf8', function(err) {
      if (err) throw err
    })
  } catch (e) {
    console.log(e)
  }
}

• 修改package.json文件，添加命令yaml

{
  // ...
  "scripts": {
    // ...
    "proto": "pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto",
    "protots": "pbjs -t static-module src/proto/*.proto | pbts -o src/proto/bundle.d.ts -",
    "yaml": "node src/api/yamltojson"
    // ...
  },
  // ...
}

• 当yaml文件有修改时，将其复制到src/api/目录，

• 然后执行命令npm run yaml生成对应的json文件

• 修改src/types/global.d.ts文件（代码中引用json时，这么引用import yamlBuf from './protobuf.json'）

// ...
declare module "*.json" {
  const value: any;
  export default value;
}
// ...