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.
bower.json
file is located in the root
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 the bower_components
folder and save the package information in the bower.json
file.
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.
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.
ember-cli-build.js
file:… app.import('bower_components/moment/moment.js');
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 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 */
.
app.import('bower_components/ic-ajax/dist/named-amd/main.js', { exports: { 'ic-ajax': [ 'default', 'defineFixture', 'lookupFixture', 'raw', 'request', ] } });
import { raw as icAjaxRaw } from 'ic-ajax';;