Question

我正在尝试使用ember-cli来实现一个ember项目，但是我之前依赖rails和资源管道来编译我以前的所有js和（s）css。

我承认对js构建工具的理解很少，如果问题是基本的，那么道歉：我怎样才能看到构建中正在编译/包含哪些依赖项？具体来说，我想在我的项目中包括zurb-foundation和ember-leaflet。我不确定它们是否存在（至少传单没有出现在项目中 - 使用了一个适用于rails和rail-eak的基本示例）。

文件（ember-leaflet等）位于项目的供应商目录中，并通过 bower install 放置在那里（我假设？）;我是否必须手动将它们包含在root bower.json文件中（目前它们不是）; bower.json中的顺序很重要吗？

提前致谢。

DJ

Answer 1

经过一番挖掘和大量阅读后，我找到了解决方案here并得到了实用的文件。

1。）下载libs

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

注意：下载传单可能不是必要的，因为ember-leaflet似乎包含它（leaflet-dist）。这是我手动做了几次的部分，所以你可能有也可能没有供应商/传单 - DIST。只需相应改变。

2.。）配置构建资产

在module.exports行之前的 Brocfile.js 中添加导入行

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）让Ember知道Leaflet和EmberLeaflet（ .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%;
}

Answer 2

似乎有人刚创建了一个ember-cli插件：https://www.npmjs.org/package/ember-cli-ember-leaflet

我要尝试一下：）

包含与ember-cli的依赖关系

2 个答案: