EmberJS - Managing Dependencies

Ember uses NPM and Bower for managing dependencies which are defined in package.json for NPM and bower.json for Bower. For instance, you may require installing SASS for your style sheets which is not installed by Ember while developing Ember app. To accomplish this, use the Ember Addons for sharing the reusable libraries. If you want to install any CSS framework or JavaScript datepicker dependencies, then use the Bower package manager.

Addons

The Ember CLI can be used to install the Ember Addons by using the following command −

ember install ember-cli-sass

The ember install command will save all the dependencies to the respective configuration file.

Bower

It is a package manager for the web which manages the components of HTML, CSS, JavaScript or image files. It basically maintains and monitors all packages and examines new updates. It uses the configuration file bower.json to keep track of applications placed at the root of the Ember CLI project.

You can install the project dependencies by using the following command −

bower install <dependencies> --save

Assets

You can place the third-party JavaScript in the vendor/ folder of your project which are not available as an Addon or Bower package and place the own assets such as robots.txt, favicon, etc. in the public/ folder of your project. The dependencies which are not installed by Ember while developing the Ember app, should be included by using the manifest file ember-cli-build.js.

AMD JavaScript modules

You can give the asset path as the first argument and the list of modules and exports as the second argument. You can include these assets in the ember-cli-build.js manifest file as −

app.import('bower_components/ic-ajax/dist/named-amd/main.js', {
   exports: {
      'ic-ajax': [
         'default',
         'defineFixture',
         'lookupFixture',
         'raw',
         'request'
      ]
   }
});

Environment Specific Assets

The different assets can be used in different environments by defining object as first parameter which is an environment name and the value of an object should be used as asset in that environment. In the ember-cli-build.js manifest file, you can include as −

app.import ({
   development: 'bower_components/ember/ember.js',
   production:  'bower_components/ember/ember.prod.js'
});

Other Assets

Once all the assets are placed in the public/ folder, they will get copied into the dist/ directory. For instance, if you copy a favicon placed at the public/images/favicon.ico folder, this will get copied into the dist/images/favicon.ico directory. The third-party assets can be added manually in the vendor/ folder or by using the Bower package manager via the import() option. The assets which are not added by using the import() option, will not be present in the final build.

For instance, consider the following line of code which imports the assets into the dist/ folder.

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf');

The above line of code creates a font file in dist/font-awesome/fonts/fontawesomewebfont.ttf. You can also place the above file at a different path as shown below −

app.import('bower_components/font-awesome/fonts/fontawesome-webfont.ttf', {
   destDir: 'assets'
});

It will copy the font file in dist/assets/fontawesome-webfont.ttf.

Advertisements