2

I'm trying to add the AutobahnJS library to my Aurelia application which is using the new aurelia-cli requirejs-based dependency management feature.

After installing autobahn using npm:

npm install autobahn

And then editing aurelia.json to provide more information about the structure of the NPM module (in vendor-bundle.js section):

{
  "name": "autobahn",
  "path": "../node_modules/autobahn/lib",
  "main": "autobahn"
}

The application will not start (au run --watch), due to this (abbreviated) error: 

// snip...
errno: -2,
code: 'ENOENT',
syscall: 'open',
path: '/Users/hozn/workspace/my-ui/autobahn/polyfill.js',
moduleTree: [ 'autobahn/autobahn' ],
fileName: '/Users/hozn/workspace/my-ui/node_modules/autobahn/lib/autobahn.js'

Looking at the source of node_modules/autobahn/lib/autobahn.js there are multiple require('./<module>.js' lines, such as:

var util = require('./polyfill.js');

Apparently the aurelia-cli bundler/runner is assuming those would be relative to my application's root directory rather than the autobahn module's installed directory. Removing the ".js" extension does seem to fix things here, though I'm not sure if that is addressing the root problem or just triggering a different lookup mechanism? I've been unable to find any other special settings to pass in the dependency declaration to allow this package to work.

So far the only thing I've gotten to work is to download one of the built versions of autobahn.js and then put this in the prepend section of the aurelia.json file. This is a bit of a hack, though, and I'd love to learn how to do this more correctly using aurelia-cli.

Hans L
  • 5,845
  • 4
  • 22
  • 21

1 Answers1

0

If you have only javascript and css files in your libs then you can add dependency manually to aurelia.json like that (you must install and add to aurelia.json all your deps libs too):

{
  "name": "autobahn",
  "path": "../node_modules/autobahn/lib",
  "main": "autobahn",
  "deps": ["module1", "module2", "module2"],
  "resources": ["file1.css", "file2.css"]
}

If you have too complex lib or extendend files like fonts -- you must add your library manually to bundle. You can find working example here: How can I add Font Awesome to my Aurelia project using npm?

Community
  • 1
  • 1
JayDi
  • 1,037
  • 15
  • 24
  • Thanks for replying! Not sure that I understand how this is different than what I already added to`aurelia.json` -- i.e. does this provide a way for me to enumerate all the javascript files so that the relative imports from `autobahn.js` are correctly resolved? – Hans L Oct 25 '16 at 00:29
  • If you use aurelia.json then you do not need to enumerate all js-files. Aurelia scanner will analyze your main js-file and include to resources all lib's dependency (another js-files). But if your lib use third party libs like jquery then you need to enumerate it in deps section -- module loader (require.js) will ensure what it will be load before your lib. – JayDi Oct 25 '16 at 05:31
  • So, I am using `aurelia.json`, as I described above (in my question). The problem is that this npm-installed module does not get built successfully out into `vendor-bundle.js` due to the relative imports. – Hans L Oct 25 '16 at 14:16