CODEWITHSUNDEEP
ember.jsember-clibroccolijs
eguneys
eguneys

Reputation: 6406

Ember cli Managing dependencies for custom folders

I have an ember app, and a folder with a file playGame/game.js. This file includes game logic, and I want to import it for asset compilation.

If this file is under app/playGame/game.js and my Brocfile is like this:

app.import('app/playGame/game.js')

this gives the error, path or pattern app/playGame/game.js didn't match any files..

but if I put the file under bower_components/playGame/game.js and my Brocfile:

app.import('bower_components/playGame/game.js'), this compiles successfully.

What is the problem and solution here?

Upvotes: 0

Views: 109

Answers (1)

Kim Røen
Kim Røen

Reputation: 468

There are two parts to this:

  1. Where should I put my file to import it as an asset?
  2. Why isn't putting it in my app-folder working?

The way to do what you want is to create a folder called vendor in your root, put the file somewhere in there, and then import it in your Brocfile.js like so:

app.import('vendor/playGame/game.js');

This is documented on ember-cli.com, although somewhat hidden.

You could also put it in bower_components, but that folder is for things installed with bower, and could theoretically be deleted (in fact, this is a common recommendation to various issues). Things in bower_components is also not checked in to version control by default, which you probably want to do in this case.

This should solve your issue.

Now, why doesn't it work to put it in /app?

app is a special folder. From the documentation:

Contains your Ember application’s code. Javascript files in this folder are compiled through the ES6 module transpiler and concatenated into a file called app.js.

This is what makes it possible for you to import stuff from within your app. The folders in app is available directly under your <appname> namespace, along with some other files and folders like config/environment.

Example:

import myWidget from 'my-app/widgets/my-widget';`

The referenced file is /app/widgets/my-widget.js.

The ember-cli website has some more resources for how to use modules. Read those if this doesn't make any sense.

To sum up:

  1. You could put your file in app, but that would make it part of your transpiled package, and you'd have to use it that way internally with an export and everything else that comes with it. It would end up as part of <appname>.js
  2. You could put your file in vendor and import it in your Brocfile.js as explained above. It would be part of vendor.js and load before your app code.

Upvotes: 2

Related Questions