@techteamer/browserify-protbuf

Browserify transform to directly require `.proto` files.

Usage no npm install needed!

<script type="module">
  import techteamerBrowserifyProtbuf from 'https://cdn.skypack.dev/@techteamer/browserify-protbuf';
</script>

README

browserify-protobuf

browserify-protobuf is a Browserify transform. With this tool you can require protocol buffer files directly in your code. You can and avoid additional HTTP requests when using protobufjs on the client side by replacing lines like these:

const protobuf = require('protobufjs')
const exampleProto = protobuf.load('protocol/example.proto')

with this:

const exampleProto = require('protocol/example.proto')

It is based on the pbjs cli command of protobufjs. And uses the json-module flag, but it loads each required protocol buffer into a separate protobuf Root object.

Installation

npm install --save-dev @techteamer/browserify-protobuf

Usage

example.proto

syntax = "proto2";

package test;

service TestService {
    rpc Echo (TextMessage) returns (TextMessage) {}
}

message TextMessage {
    required string text = 1;
}

example.js

const exampleProto = require('example.proto')
const TestService = exampleProto.lookupService('TestService')
// ...

Build

Run directly from CLI:

browserify example.js -t @techteamer/browserify-protobuf > dist.js

Or using the browserify API:

browserify(file, {
  // browserify options
  transform: ['@techteamer/browserify-protobuf']
})

Or add it to browserify config using package.json:

{
  "browserify": {
    "transform": [
      ["@techteamer/browserify-protobuf"]    
    ]  
  }
}