Skip to content

Commit ea97c91

Browse files
Merge pull request #204 from ember-learn/v3-5
Release version 3.5
2 parents e98da46 + ddc02fd commit ea97c91

File tree

106 files changed

+16773
-19
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

106 files changed

+16773
-19
lines changed
Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
As you're developing your Ember app, you'll likely run into common scenarios that aren't addressed by Ember itself,
2+
such as authentication or using SASS for your stylesheets.
3+
Ember CLI provides a common format called [Ember Addons](#toc_addons) for distributing reusable libraries
4+
to solve these problems.
5+
Additionally, you may want to make use of front-end dependencies like a CSS framework
6+
or a JavaScript datepicker that aren't specific to Ember apps.
7+
8+
## Addons
9+
10+
Ember Addons can be installed using [Ember CLI](http://ember-cli.com/extending/#developing-addons-and-blueprints)
11+
(e.g. `ember install ember-cli-sass`).
12+
Addons may bring in other dependencies by modifying your project's `package.json` file automatically.
13+
14+
You can find listings of addons on [Ember Observer](http://emberobserver.com).
15+
16+
## Regular npm packages
17+
18+
While dependencies can be managed in several ways,
19+
it's worth noting that the process can be greatly simplified for new developers by using ember-auto-import,
20+
which offers zero config imports from npm packages.
21+
It's easily installed using `ember install ember-auto-import`.
22+
For further usage instructions, please follow the [project README](https://github.com/ef4/ember-auto-import).
23+
24+
## Other assets
25+
26+
Third-party JavaScript not available as an addon or npm package should be placed in the `vendor/` folder in your project.
27+
28+
Your own assets (such as `robots.txt`, `favicon`, custom fonts, etc) should be placed in the `public/` folder in your project.
29+
30+
## Compiling Assets
31+
32+
When you're using dependencies that are not included in an addon,
33+
you will have to instruct Ember CLI to include your assets in the build.
34+
This is done using the asset manifest file `ember-cli-build.js`.
35+
You should only try to import assets located in the `node_modules` and `vendor` folders. `bower_components` also still
36+
works, but is recommended against, unless you have no other choice. Even bower recommends not to use itself anymore.
37+
38+
### Globals provided by JavaScript assets
39+
40+
The globals provided by some assets (like `moment` in the below example) can be used in your application
41+
without the need to `import` them.
42+
Provide the asset path as the first and only argument.
43+
44+
```javascript {data-filename=ember-cli-build.js}
45+
app.import('node_modules/moment/moment.js');
46+
```
47+
48+
You will need to add `"moment"` to the `globals` section in `.eslintrc.js` to prevent ESLint errors
49+
about using an undefined variable.
50+
51+
### Anonymous AMD JavaScript modules
52+
53+
You can transform an anonymous AMD module to a named one by using the `amd` transformation.
54+
55+
```javascript {data-filename=ember-cli-build.js}
56+
app.import('node_modules/moment/moment.js', {
57+
using: [
58+
{ transformation: 'amd', as: 'moment' }
59+
]
60+
});
61+
```
62+
63+
This transformation allows you to `import` moment in your app. (e.g. `import moment from 'moment';`)
64+
65+
### CommonJS JavaScript modules
66+
67+
[ember-cli-cjs-transform](https://github.com/rwjblue/ember-cli-cjs-transform) allows us to import CommonJS modules into
68+
our Ember app. It also does auto-rollup and some nice caching, so it should pull in all the deps that are pulled in
69+
with `require` for you automatically. It is not yet included with ember-cli by default, so you will need to install it.
70+
71+
```bash
72+
ember install ember-cli-cjs-transform
73+
```
74+
75+
```javascript {data-filename=ember-cli-build.js}
76+
app.import('node_modules/showdown/dist/showdown.js', {
77+
using: [
78+
{ transformation: 'cjs', as: 'showdown' }
79+
]
80+
});
81+
```
82+
83+
You can now `import` them in your app. (e.g. `import showdown from 'showdown';`)
84+
85+
### Environment-Specific Assets
86+
87+
If you need to use different assets in different environments, specify an object as the first parameter.
88+
That object's key should be the environment name, and the value should be the asset to use in that environment.
89+
90+
```javascript {data-filename=ember-cli-build.js}
91+
app.import({
92+
development: 'node_modules/moment/moment.js',
93+
production: 'node_modules/moment/min/moment.min.js'
94+
});
95+
```
96+
97+
If you need to import an asset in only one environment you can wrap `app.import` in an `if` statement.
98+
For assets needed during testing, you should also use the `{type: 'test'}` option to make sure they
99+
are available in test mode.
100+
101+
```javascript {data-filename=ember-cli-build.js}
102+
if (app.env === 'development') {
103+
// Only import when in development mode
104+
app.import('vendor/ember-renderspeed/ember-renderspeed.js');
105+
}
106+
if (app.env === 'test') {
107+
// Only import in test mode and place in test-support.js
108+
app.import('node_modules/sinonjs/sinon.js', { type: 'test' });
109+
app.import('node_modules/sinon-qunit/lib/sinon-qunit.js', { type: 'test' });
110+
}
111+
```
112+
113+
### CSS
114+
115+
Provide the asset path as the first argument:
116+
117+
```javascript {data-filename=ember-cli-build.js}
118+
app.import('node_modules/foundation/css/foundation.css');
119+
```
120+
121+
All style assets added this way will be concatenated and output as `/assets/vendor.css`.
122+
123+
### Other Assets
124+
125+
All assets located in the `public/` folder will be copied as is to the final output directory, `dist/`.
126+
127+
For example, a `favicon` located at `public/images/favicon.ico` will be copied to `dist/images/favicon.ico`.
128+
129+
All third-party assets, included either manually in `vendor/` or via a package manager like npm, must be added via `import()`.
130+
131+
Third-party assets that are not added via `import()` will not be present in the final build.
132+
133+
By default, `import`ed assets will be copied to `dist/` as they are, with the existing directory structure maintained.
134+
135+
```javascript {data-filename=ember-cli-build.js}
136+
app.import('node_modules/font-awesome/fonts/fontawesome-webfont.ttf');
137+
```
138+
139+
This example would create the font file in `dist/font-awesome/fonts/fontawesome-webfont.ttf`.
140+
141+
You can also optionally tell `import()` to place the file at a different path.
142+
The following example will copy the file to `dist/assets/fontawesome-webfont.ttf`.
143+
144+
```javascript {data-filename=ember-cli-build.js}
145+
app.import('node_modules/font-awesome/fonts/fontawesome-webfont.ttf', {
146+
destDir: 'assets'
147+
});
148+
```
149+
150+
If you need to load certain dependencies before others,
151+
you can set the `prepend` property equal to `true` on the second argument of `import()`.
152+
This will prepend the dependency to the vendor file instead of appending it, which is the default behavior.
153+
154+
```javascript {data-filename=ember-cli-build.js}
155+
app.import('node_modules/es5-shim/es5-shim.js', {
156+
type: 'vendor',
157+
prepend: true
158+
});
159+
```
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Every Ember application is represented by a class that extends [`Application`](https://emberjs.com/api/ember/release/classes/Application).
2+
This class is used to declare and configure the many objects that make up your app.
3+
4+
As your application boots,
5+
it creates an [`ApplicationInstance`](https://emberjs.com/api/ember/release/classes/ApplicationInstance) that is used to manage its stateful aspects.
6+
This instance acts as the "owner" of objects instantiated for your app.
7+
8+
Essentially, the `Application` *defines your application*
9+
while the `ApplicationInstance` *manages its state*.
10+
11+
This separation of concerns not only clarifies the architecture of your app,
12+
it can also improve its efficiency.
13+
This is particularly true when your app needs to be booted repeatedly during testing
14+
and / or server-rendering (e.g. via [FastBoot](https://github.com/tildeio/ember-cli-fastboot)).
15+
The configuration of a single `Application` can be done once
16+
and shared among multiple stateful `ApplicationInstance` instances.
17+
These instances can be discarded once they're no longer needed
18+
(e.g. when a test has run or FastBoot request has finished).

0 commit comments

Comments
 (0)