En En

Создание нового приложения


Ember CLI — интерфейс командной строки в Ember. Он предоставляет стандартную структуру проекта, набор инструментов разработки и систему дополнений. Это позволяет разработчикам Ember сфокусироваться на разработке приложений, вместо того чтобы отвлекаться на создание вспомогательных структур, которые заставляют эти приложения работать. Чтобы получить список команд Ember CLI, в командной строке нужно набрать ember –help. Подробную информацию по конкретной команде можно увидеть, набрав ember help <название_команды>.

Создание нового приложения

Чтобы создать новый проект с помощью Ember CLI, используйте команду new. Для подготовки к изучению следующего раздела можно создать приложение под названием super-rentals.

ember new super-rentals

Структура каталогов

С помощью команды new мы генерируем структуру проекта со следующими файлами и директориями:

|--app
|--bower_components
|--config
|--dist
|--node_modules
|--public
|--tests
|--tmp
|--vendor

bower.json
ember-cli-build.js
package.json
README.md
testem.js

Взглянем на папки и файлы, которые сгенерировал Ember CLI.

app: Здесь хранятся папки и файлы для моделей, компонентов, маршрутов, шаблонов и стилей. Основная часть кода вашего проекта Ember находится здесь.

bower_components/bower.json: Bower — инструмент управления зависимостями. Он используется в Ember CLI, чтобы управлять front-end плагинами и зависимостями компонентов (HTML, CSS, JavaScript и т. д.). Все компоненты Bower устанавливаются в директорию bower_components. Если мы откроем bower.json, то увидим список зависимостей, которые устанавливаются автоматически, включая Ember, Ember CLI Shims и QUnit (для тестирования). Если мы добавим front-end зависимости вроде Bootstrap, то увидим их в этом списке и директории bower_components.

config: Директория config содержит environment.js, где вы можете менять настройки приложения.

dist: При компоновке приложения для развертывания выходные файлы будут сформированы здесь.

node_modules / package.json: Эта директория и этот файл из npm. npm — менеджер пакетов для Node.js. Ember компонуется с Node.js и использует для работы разнообразие его модулей. Файл package.json содержит список текущих зависимостей npm для приложения. Любое дополнение Ember CLI, которое вы устанавливаете, также будет отображаться здесь. Пакеты, указанные в package.json, устанавливаются в директорию node_modules.

public: Эта директория содержит ресурсы, например, изображения и шрифты.

vendor: В этой директории находятся front-end зависимости (например, JavaScript или CSS), которыми Bower изначально не управляет.

tests / testem.json: В папке tests находятся автоматизированные тесты для приложения, а исполнитель тестов Ember CLI testem настраивается в файле testem.json.

tmp: Здесь находятся временные файлы Ember CLI.

ember-cli-build.js: Этот файл описывает, как Ember CLI должен создавать приложение.

Модули ES6

Если вы посмотрите на app/router.js, то увидите синтаксис, который может быть вам незнаком.

app/router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
});

export default Router;

Ember CLI использует модули ECMAScript 6 (или просто ES6), чтобы организовать код приложения. Например, строка import Ember from 'ember'; дает доступ к текущей библиотеке Ember.js как переменной Ember. А строка import config from './config/environment'; дает доступ к данным конфигурации приложения как переменной config. const — это способ объявить доступную только для чтения переменную. Это гарантирует, что ее случайно не переназначат. В конце файла export default Router; позволяет сделать переменную Router, определенную в этом файле, доступной для других частей приложения.

Обновление Ember

Прежде чем углубляться в обучение, убедитесь, что у вас стоит самая последняя версия Ember и Ember Data. Если версия ember в bower.json ниже версии, указанной в верхнем левом углу этого руководства, то обновите номер версии в bower.json и запустите bower install. Таким же образом, если версия ember-data в package.json ниже, обновите номер версии и запустите npm install.

Сервер разработки

Когда вы создаете новый проект, для проверки его работоспособности можно запустить сервер разработки Ember:

ember server

или более кратко:

ember s

Если вы перейдете по адресу http://localhost:4200, то увидите исходный экран приветствия. Как только мы добавим собственный файл app/templates/application.hbs, экран приветствия будет заменен нашими материалами. default welcome page


Комментарии (2)

  1. Yuriy Po 08 июля 2017, 09:38 # 0
    Ну что, попробовал познакомиться с Ember. Установил глобально — что-то там, были пара каких-то WARN, но установился. Создал новый проект, написал ember server —
    Error: Cannot find module '../internal/baseMerge'.
    На этом, видимо, знакомство и закончится.
    1. js-sucks 15 ноября 2017, 01:14 # 0
      И хорошо.
    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.