Включение зависимостей с ember-cli

Я пытаюсь запустить ember-cli, чтобы получить проект ember, однако ранее я полагался на рельсы и конвейер активов для компиляции всех моих js и (s) css для предыдущих проектов.

Я допускаю слабое понимание инструментов сборки js, поэтому извиняюсь, если вопрос является основным: как я могу увидеть, какие зависимости компилируются/включены в сборку? В частности, я хочу включить в проект проект zurb-foundation и ember-leaflet. Я не уверен, что они там (по крайней мере, карта листовка не отображается в проекте --- используя базовый пример, который работал с рельсами и рельсами).

Файлы (ember-листовка и т.д.) находятся в каталоге поставщика проекта и помещены туда через установку bower (предположим?); мне нужно вручную включить их в корневой файл bower.json(в настоящее время это не так); это порядок в bower.json важно?

Спасибо заранее.

DJ

Ответы

Ответ 1

После некоторого копания и многого чтения я нашел решение здесь и получил ember-листовку для работы.

1.) Скачайте libs

bower install --save leaflet
bower install --save ember-leaflet

Примечание. Вероятно, не обязательно загружать листок, поскольку, как представляется, в нем содержится листок-листок (листовки-dist). Это часть, которую я сделал вручную несколько раз, поэтому у вас может быть или не быть поставщика/расстояние. Просто измените соответствующим образом.

2.) Настроить создание активов

Добавьте строки импорта в Brocfile.js до строки module.exports

app.import('vendor/leaflet-dist/leaflet-src.js')
app.import('vendor/leaflet-dist/leaflet.css')
app.import('vendor/ember-leaflet/dist/ember-leaflet.js')

module.exports = app.toTree();

3) делают Лифлет и EmberLeaflet известными Ember (.jshintrc)

{
  "predef": {
    ...
    "L": true,
    "EmberLeaflet": true
  }
  ...
}

4) создать представление

export default EmberLeaflet.MapView.extend({
  classNames : ['ember-leaflet-map']
});

5) создайте шаблон, используя представление (где имя вида соответствует имени файла, здесь views/mapview.js)

<div id="map">
  {{view 'mapview'}}
</div>

6) проверьте/добавьте таблицу стилей поставщика в app/index.html(должны присутствовать последние версии ember-cli)

<head>
   ...
   <link rel="stylesheet" href="assets/vendor.css">
</head>

7) запустите Ember

ember server

8) Бонус: если вы используете Twitter Bootstrap 3 здесь, css мне пришлось добавить в app/styles/app.css(возможно, можно было бы упростить)

html,
body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding-top: 20px;
  height: 100%;
}
.page-content {
  padding: 40px 15px;
  height: 100%;
}
.row {
  margin-bottom: 1.5em;
}
#map {
  height: 100%;
}
.ember-leaflet-map {
  height: 100%;
}
body > .ember-view {
  height: 100%;
}