Loading: long, ByteBuffer and ProtoBuff with requirejs

Question

Working on a project that gets its content with ProtoBuff. Made it work once with the loading of the JavaScripts in the HTML. Now refactoring to use requirejs to load the scripts. But when I try to use the scripts, it gives an error telling me the scripts are not loaded.

Require.js is loaded in the index.html
Bower is used to manage dependencies.

I am pretty sure I am missing a (simple) thing here, hope some one can help.

requirejs.config({
    long : "long",
    ByteBuffer : "ByteBuffer",
    ProtoBuf : "ProtoBuf"
});

requirejs([ "long", "ByteBuffer", "ProtoBuf" ], 
    function( long, ByteBuffer, ProtoBuf ) {
});

the files long.js, ByteBuffer.js and ProtoBuf.js are all in the same map as the App.js, where this is called.

*While this question about requirejs and ByteBuffer looks promising, I think I am missing something here.

This does work, the functions in those files are accessible within the rest of the scope:

requirejs([ "otherPage", "differentPage" ], 
    function( util ) {
});

Hmm.. yes you *are* missing something because the configuration you show cannot possibly work. It looks like you were trying to set paths so all the key-value pairs you show would have to be in [`paths`](http://requirejs.org/docs/api.html#config-paths). But this cannot be the sole issue because even if you preform this fix, what you'd have in `paths` is nothing more than what RequireJS does *by default*. You probably need to set your `baseUrl` setting to a correct value. — Louis, Oct 07 '16 at 15:16
I'd try to add requirejs.config after the normal requirejs method did not work... It loads other scripts nicely. — Flummox - don't be evil SE, Oct 07 '16 at 15:18

score 1 · Accepted Answer · answered Oct 11 '16 at 20:51

You need to make sure you have requirejs hooked up correctly and that you have the relevant proto library loaded.

You can use bower to manage dependencies. Install bower and

bower install long byteBuffer protobuf requirejs-text requirejs-proto

The final code can then look something like this:

require.config({
    paths: {
        'Long': '../../bower_components/long/dist/Long',
        'ByteBuffer': '../../bower_components/byteBuffer/dist/ByteBufferAB',
        'ProtoBuf': '../../bower_components/protobuf/dist/ProtoBuf',
        'text': '../../bower_components/requirejs-text/text',
        'proto': '../../bower_components/requirejs-proto/proto'
    },
    proto: {
        ext: 'proto',
        convertFieldsToCamelCase: false,
        populateAccessors: true
    }
});

require(['proto!test'], function(builder) {
    var pack = builder.build('pack');
    var Message1 = builder.build('pack.Message1');
});

require(['proto!test::pack.Message1', 'proto!test::pack.Message2'], function(Message1, Message2) {
    ...
});

some code from https://www.npmjs.com/package/requirejs-proto

Loading: long, ByteBuffer and ProtoBuff with requirejs

1 Answers1