0

With the excellent broccoli-stew I can take a look at the exported application tree:

/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var log   = require('broccoli-stew').log;
var debug = require('broccoli-stew').debug;

var app = new EmberApp();

// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.

app.import('bower_components/ember-i18n/lib/i18n.js');
app.import('bower_components/raphael/raphael.js');

var finalTree = log(app.toTree());

module.exports = finalTree;

With this I get a very clean tree-like output of my application:

[ 'assets/app.js',
  'assets/app.map',
  'assets/app.scss',
  ...
  'assets/vendor.css',
  'assets/vendor.js',
  'assets/vendor.map',
  'crossdomain.xml',
  'index.html',
  'robots.txt',
  'testem.js',
  'tests/index.html' ]

I see that in that tree we have, among other files, a vendor.js and an app.js modules (as expected), but I do not know what packages are put into each of them.

I have the feelling I am missing one in my frontend (in this case, raphael.js), so I would like to verify that ember-cli (via EmberApp) has indeed done what I asked for (namely, include the raphael.js, probably in vendor.js)

Taking a direct look at app.js or vendor.js is not feasible (too big / don't know what to look for). I want a simple tree-like display of the files that have been included by EmberApp into vendor.js / app.js, in the same (similar) format that broccoli-stew is providing.

Is this possible? How?

blueFast
  • 41,341
  • 63
  • 198
  • 344

1 Answers1

-1

To quote http://www.ember-cli.com/asset-compilation/#configuring-output-paths:

Assets                                          Output File
JavaScript files you import with app.import()   /assets/vendor.js

So although that is not a nice tree view, you should be fine :-)

Phil Rykoff
  • 11,999
  • 3
  • 39
  • 63
  • 1
    That is what I *tell* EmberApp to do, not what EmberApp *does*. It is hopefully the same, but in my case that was *exactly* what I was not sure about. I wanted an independent way of listing the contents of `vendor.js`, and `app.js`. – blueFast Jul 07 '15 at 07:10
  • If you really want to see what Ember is doing, have a look at the source of the function: https://github.com/ember-cli/ember-cli/blob/master/lib/broccoli/ember-app.js#L1205. Open Source <3 – Phil Rykoff Jul 08 '15 at 18:51
  • By the same reasoning, I do not need `broccoli-stew`, or a debugger, or ... Just look at the code! And still, those tools are very useful. Anyway, I assume there is no way of listing the contents of `vendor.js` and `app.js` once they habe been generated. – blueFast Jul 09 '15 at 07:42