Framework: How to import, installed npm packages?

[prashant-anand]

I want to user parse as my back-end with aurelia. I installed the npm package using 'npm install parse' command. now how can i use import key word to reference to the js file that got installed?

[EisenbergEffect]

Probably import parse from 'parse'; or something like that.

[PWKad]

@prashant-anand you need to install it with JSPM -

jspm install npm:parse

And then import it as Rob mentioned above.

[prashant-anand]

Great! thanks, I was hoping it would be as easy as that.

[brunocascio]

Hi!

How to import a package with special chars?

For example, import youtube-dl from "youtube-dl"

I got this error:

[16:40:43] Starting 'build-system'...
[16:40:43] Plumber found unhandled error:
 SyntaxError in plugin 'gulp-babel'
Message:
    [.....]/utube/src/search.js: Unexpected token (1:14)

My search.js

import youtube-dl from 'youtube-dl';

export class Search {
  title = 'Search video!';

  constructor() {
    console.log('hello');
  }
}

[stevenvachon]

Why do we need JSPM?

I tried to import a commonjs module with babel-plugin-transform-es2015-modules-commonjs in the build script, but it's still producing:

function why_is_this_out_here(){}
define("../node_modules/module/file", [],function(){});

[Plaristote]

This is highly confusing to me.

If I understand everything properly, jspm has its own require functions.
Aurelia also has its own require functions.
I cannot possibly use both at the same time, can I ?

Aurelia doesn't seem to care about jspm packages. If I install anything using jspm, it will just be ignored. And Aurelia cannot import "regular" npm packages (I can work with underscore by prepending it to the vendor source, but I cannot work with underscore-node, because Aurelia's require system doesn't seem to use module.exports).

The question remain. How does one uses the export of a nodejs package in Aurelia ?
Another question even raises. How does one uses jspm packages with Aurelia ?
And an even more important question comes to mind: where is this documented ?

I mean, even to install aurelia related packages into my aurelia application, I've had to follow documentation from unofficial sources, because I just couldn't find that in the hub (http://aurelia.io/hub.html). And now that it comes to packages unrelated to aurelia, I can't find a single reference explaining how to do that.

EDIT: I found this bit (http://blog.nojaf.com/2015/07/08/using-toastr-with-aurelia/), explaining how to use jspm packages with aurelia. I'll check it out, see if it's still up to date.

[PWKad]

For clarification if anyone comes back in the future to this and is confused by mis-information -

1. @Plaristote - Aurelia does not implement require() on it's own, we use a loader abstraction that is defined by the user (usually either require.js, system.js, or something similar)
2. @brunocascio - - characters (dashes) are not valid names for properties / keys / objects in JavaScript, this has nothing to do with Aurelia. This is how JavaScript works
3. @stevenvachon - JSPM has nothing to do with the gulp tasks or other build scripts. Dev dependencies are always installed through npm in the skeletons and cli we provide. You simply npm install {{package-name}} --save-dev and you can use it in a gulp script, has nothing to do with JSPM, the OP was asking about JSPM.

[guiprav]

Still no idea how to easily use regular NodeJS modules (i.e. ones that aren't AMD / UMD / whatever-compatible; just simple NodeJS modules that things like Browserify and WebPack can easily load without having to replicate them on a separate file besides package.json).

Is it possible to do that in a RequireJS application that's been bootstrapped with au new?

Maybe aurelia-cli could automatically use an AMDification tool for those modules? That would be insanely useful. I mean, there are so many useful npm packages that can be used in the browser, but are NodeJS style modules. Is Aurelia really ignoring that, or is it just not implemented yet?

[AshleyGrant]

The Aurelia CLI supports using Webpack now, so you can just use Webpack.

[guiprav]

So if I use WebPack I don't have to specify dependencies in aurelia.json? That's a good start, although WebPack is pretty bloated and I had problems with an Aurelia / WebPack project before. Since Aurelia isn't very popular yet, there are lots os small pesky bugs, especially if you're not using the default configuration (RequireJS, etc). Considering RequireJS is the default, don't you think automatic AMDification could be a good thing?

[AshleyGrant]

Yep, it would probably be a nice feature. There's been a few times that not having that feature has been a problem for me. I'd recommend filing a feature request on the cli repo.

[guiprav]

I'm not very fond of the idea of requesting features, it doesn't feel right. If the Aurelia team had that need before and thinks it ought to be done, they should just do it. But it's good to have some confirmation from you that you think it would be a good feature. I might be able to convince my boss to take a stab at implementing it because of that. If it works out, I'll send you guys a pull request later. Thanks :)

[AshleyGrant]

On the team, we don't always know what everybody who uses Aurelia needs. That's why, in our issue template, we give the option of "I am submitting a feature request." So feel free to submit the feature request. If you can submit a pull request that implements the feature, you can reference the issue! We welcome both feature requests and pull requests to add new features!

[rdemetrescu]

@n2liquid , another option is to use FuseBox as bundler/loader.

https://fuse-box.org/

This one integrate Aurelia with FuseBox:
https://github.com/fuse-box/fuse-box-aurelia-loader

And this is a skeleton you can use:
https://github.com/fuse-box/fuse-box-aurelia-seed

I am also attaching my own fuse.js that I am using, which makes use of toastr...

fuse.js.zip