包括与ember-cli的依赖关系 [英] Including dependencies with ember-cli
问题描述
我正在尝试ember-cli来获得一个垃圾项目，但是我以前依靠rails和资产管道来编译我以前的项目的所有js和css。
我承认对js构建工具的了解不够，所以如果问题是基本的话，那么请问如何才能看到编译/包含在构建中的依赖关系？具体来说，我想在我的项目中包括zurb-foundation和ember-leaflet。我不知道他们是否在那里（至少在项目中没有显示传单图 - 使用与轨道和轨道线一起使用的基本示例）。
（p）文件（ember-leaflet等）位于项目的供应商目录中，并通过 bower install （我假设）放在那里;我必须手动将它们包含在根bower.json文件中（目前它们不是）; bower.json中的顺序是否重要？
提前感谢
DJ
经过一番挖掘和大量的阅读，我发现了解决方案这里，并获得ember-leaflet工作。
1。）下载libs
bower install --save leaflet
bower install --save ember-leaflet
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（ .jshintrc ）的Leaflet和EmberLeaflet / p>
{
predef：{
...
L：true，
EmberLeaflet：true
}
...
}
4）创建视图
导出默认值EmberLeaflet.MapView.extend（{
classNames：[ 'ember-leaflet-map']
}）;
5）使用视图创建模板（其中视图名称对应于文件名，这里 views / mapview.js ）
< div id =map>
{{view'mapview'}}
< / div>
6）检查/添加供应商样式表到app / index.html（应该与最近的版本一起出现of ember-cli）
< head>
...
< link rel =stylesheethref =assets / vendor.css>
< / head>
7）运行Ember
ember server
8）奖金：如果您使用 Twitter Bootstrap 3 这里是我必须添加到应用程序/样式/ app.css（可能会被简化）的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％;
}
I am trying out ember-cli to get an ember project going, however I have previously relied on rails and the asset pipeline to compile all my js and (s)css for previous projects.
I admit a weak understanding of js build tools, so apologies if the question is basic: How can I see what dependencies are being compiled/included in the build? Specifically, I want to include both zurb-foundation and ember-leaflet in my project. I am not sure if they are there (at least the leaflet map is not showing up in the project --- using a basic example that worked with both rails and rail-eak).
The files (ember-leaflet, etc) are in the vendor directory of the project and were placed there thru bower install (I assume?); do I have to manually include them in the root bower.json file (currently they are not); is the order in bower.json important?
Thanks in advance.
DJ
解决方案After some digging and a lot of reading I found the solution here and got ember-leaflet to work.
1.) Download the libs
bower install --save leaflet bower install --save ember-leafletNote: It's probably not neccessary to download leaflet, since ember-leaflet seems to have it included (leaflet-dist).This is the part I did manually a few times, so you may or may not have vendor/leaflet-dist. Just change accordingly.
2.) Configure building the assets
Add the import lines in your Brocfile.js before the module.exports line
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) make Leaflet and EmberLeaflet known to Ember (.jshintrc)
{ "predef": { ... "L": true, "EmberLeaflet": true } ... }4) create a view
export default EmberLeaflet.MapView.extend({ classNames : ['ember-leaflet-map'] });5) create a template using the view (where view name corresponds to the file name, here views/mapview.js)
<div id="map"> {{view 'mapview'}} </div>6) check / add vendor style sheet to app/index.html (should be present with recent versions of ember-cli)
<head> ... <link rel="stylesheet" href="assets/vendor.css"> </head>7) run Ember
ember server8) Bonus: In case you are using Twitter Bootstrap 3 here's the css I had to add to app/styles/app.css (could probably be simplified)
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%; }
这篇关于包括与ember-cli的依赖关系的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
