Let's look at dependency management and how we can use it in our Ember projects.
Bower is used for dependency management for Ember CLI. Bower is a frontend tool that is used to help fetch and install packages that you might need.
The
bower.json
file is located in theroot
folder of your project. It contains all the dependencies. Let's say that we want to install the Bootstrap library:$ bower install bootstrap --save
This command will install
bootstrap
in thebower_components
folder and save the package information in thebower.json
file.Tip
Ember add-ons
Another popular way of adding third-party libraries to Ember is using add-ons or addons as you sometimes see it. An add-on is Ember's way of sharing libraries between applications. There are well over a thousand of them available.
You can install add-ons using Ember CLI. For example, to install Bootstrap, you'd type this on the command line in the project directory:
$ ember install ember-bootstrap
You can easily find a list of add-ons at these websites:
This will be discussed in more detail in the Working and creating add-ons recipe in Chapter 11, Real-Time Web Applications.
If, for some reason, you need to reinstall your dependencies, you can run the
install
command by itself:$ bower install
This will install all dependencies that are listed in the
bower.json
file.
Ember CLI allows you to load Asynchronous Module Definition (AMD) and non-AMD assets. It's a way of defining code modules and their dependencies.
To load a non-AMD asset, you'll need to import it using the
ember-cli-build.js
file:… app.import('bower_components/moment/moment.js');
This is useful as you can use Bower to install components, and then use the
app.import
AMD so that it's available in the program. You'll need to consult the package specification to see how to use it.Tip
Tip on JSHint
JSHint is a community-driven tool that detects errors and potential problems with JavaScript code. It's built-in in Ember CLI. When using non-AMD assets, you may get errors with JSHint if you have global variables. To fix this, add
/* global MY_GLOBAL */
at the top of your module page. In the moment example, it would look like/* global moment */
.AMD assets are imported in a similar way. You add the path in the first argument and a list of exports and modules in the second:
app.import('bower_components/ic-ajax/dist/named-amd/main.js', { exports: { 'ic-ajax': [ 'default', 'defineFixture', 'lookupFixture', 'raw', 'request', ] } });
To use this asset in your application, you can import it as follows:
import { raw as icAjaxRaw } from 'ic-ajax';;