Ember CLI 在插件中生成组件答案

【问题标题】：Ember CLI generate component in an addonEmber CLI 在插件中生成组件
【发布时间】：2015-05-30 16:29:23
【问题描述】：

我尝试使用 ember-cli 制作插件。这是我到目前为止所做的一步一步：

sudo ember addon test-addon
cd test-addon
sudo ember serve

现在服务器运行并且在 localhost:4200 我可以看到测试/虚拟应用程序的应用程序 hbs。

欢迎使用 Ember.js

是时候为插件制作一些组件了：

sudo ember g component my-form

在 tests/dummy/app/templates/application.hbs 我添加了 {{my-form}}

现在我收到以下 js 错误：

未捕获的错误：找不到从 dummy/components/my-form 导入的模块 test-addon/components/my-form

编辑

在使用 npm 稍作挣扎后，我再次尝试（不使用 sudo），同样的事情发生了。我在 Ember CLI 0.2.1 上。这是我的文件，但它们应该是相同的，因为它们是自动生成的。该错误是从 bower-components/loader.js/loader.js 第 110 行抛出的。

插件/组件/my-form.js

import Ember from 'ember';
import layout from '../templates/components/my-form';

export default Ember.Component.extend({
  layout: layout
});

插件/模板/组件/my-form.hbs

{{yield}}

app/components/my-form.js

import myForm from 'test-addon/components/my-form';

export default myForm;

【问题讨论】：

你不应该 sudo-ing 那些命令。
我知道，但如果我不这样做，那么我将获得权限失败。
试过了。 ember-cli 0.2.1 没有遇到这个问题
转到您的 ~/.npm 文件夹并将所有权从 root 更改为您的用户名和组。然后尝试不带 sudo 的 ember 命令。
@blessenm 是的，但是 TBH 我不记得是什么问题了。一个简单的重启帮助。我还建议您安装 Ember CLI 不带 sudo。它避免了很多问题。

标签： ember.js ember-cli

【解决方案1】：

看起来 (as of July 2015, anyway) 模板在插件中不起作用的事实部分是设计使然。从哲学上讲，我想理由是样式应该是特定于应用程序的，但是可以共享 JS 逻辑。或者这只是一个错误/疏忽。

事实证明，如果您简单地删除该布局线和导入布局，它将起作用。

所以结果如下：

<app-name>/app/templates/includes-a-shared-component.hbs:

What follows is my shared component! {{my-shared-component}}

<addon-name>/addon/components/my-shared-component.js:

import Ember from 'ember';

export default Ember.Component.extend({
  valueFromProperty:function() { // simple hello-world-style function
    return 5;
  }.property()
});

<app-name>/app/templates/components/my-shared-component.hbs:

Hey look I'm the app-specific style for your component <marquee>Hello world</marquee>
Here's a value from a property: {{valueFromProperty}}

我的版本：余烬：1.13.1 节点：0.12.0 npm: 2.12.1

【讨论】：

【解决方案2】：

这是一个与我之前的答案完全不同（IMO 更好，但并不完美）的答案。

<addon-name>addon/components/test-component.js:

import Ember from 'ember';

export default Ember.Component.extend({
  valueFromProperty:function() {
    return 5;
  }.property(),

  layout:Ember.HTMLBars.compile("I'm the addon's layout {{valueFromProperty}}")
});

您需要将模板编译器添加到您的应用中：

<app-name>/app/ember-cli-build.js:

/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
  });
  app.import('bower_components/ember/ember-template-compiler.js');
  ... other stuff...

请注意，插件组件中的布局属性会完全覆盖您的应用内模板，因此每个应用的自定义变得更加困难。但是，如果您希望您的模板可定制，您可能会使用我的其他答案，您根本不指定布局，而只是让解析器在您的应用中找到模板。

【讨论】：

你的第一个答案是约定，我不确定这个版本有什么好处。您不应该将模板编译器交付到生产环境中，这样做对插件来说是相当粗鲁的，并且在组件中内联把手会破坏关注点分离。例如：github.com/miguelcobain/ember-paper
我在想象一些主要的 UI 组件，其布局不必因应用程序而异。安装插件会相当烦人，但必须构建自己的 .hbs（或手动添加推荐的 .hbs）。也许我错了，但我把这个插件想象成一个独立的库，如果有人想使用其中的一个组件，他们只需将它拍下来，而不用担心进一步的样式/配置。理想情况下，它只在 addon/templates/components/my-component.hbs 中有模板，但这似乎被禁止了。
你不需要添加任何东西，ember-cli 会处理它。
啊，明白了。我不清楚<addon>/addon/components 与<addon>/app/components 的范围不同。事实上，在我的回答中，我的意思是 app/templates 或 addon/templates 的真正含义是 <app-name>/app/templates 和 <addon-name>/addon/templates。

【解决方案3】：

我发现另一种方法有效，并且与我的其他答案不同。

假设您在插件中完成了ember g component my-addon-component。

这将导致您在<addon-name>/addon/components/my-addon-component.js 拥有一个组件，在<addon-name>/addon/templates/my-addon-component.hbs 拥有一个模板（至少对于我当前的 ember-cli）。
您还将在<addon-name>/app/components/my-addon-component.js 拥有一个小型组件存根

修复： 1. 将组件胆量从<addon-name>/addon/components 移动到<addon-name>/app/components（替换存根）。
2.将模板从<addon-name>/addon/templates/components移动到<addon-name/app/templates/components

在 1 之后：import layout from ../templates/components/my-addon-component 现在将具有不同的含义：它将从包含应用程序的命名空间而不是插件的命名空间导入。

在 2 之后：模板的导入位置将在包含应用程序的命名空间中。这似乎也意味着它是由应用程序编译的，所以你不会抛出“检测到插件模板，但没有注册模板编译器”

【讨论】：