8

我想知道在插件项目中创建组件时使用的约定是什么......如果我使用 ember-cli@0.2.0 在我的插件项目中生成一个组件，蓝图将在插件/组件中创建一个 js 文件，addon/templates/components中的一个模板，app/components中的一个js文件。我不太清楚的部分是这些组件的模板应该存在于何处。如果我的组件模板需要部分模板，我需要将部分模板放在 app/templates 目录中。如果它位于 addon/templates 目录中，则无法解析。所以问题是这样的：最好将所有模板（组件模板和部分模板）放在 app/templates 目录中，还是将组件模板放在 addon/templates/components 目录中，将部分模板放在 app/templates 目录中？后者感觉有点杂乱无章，而前者似乎更正确只是因为蓝图的行为。任何人有任何见解？

提前致谢。

4

1 回答 1

11

Ember-cli 正在大力开发，所以很多文件结构可能很快就会改变，但这里有一些关于文件夹结构当前状态以及为什么它的排列方式的见解：

该app/文件夹是直接导入您的应用程序的内容。助手是从这里拉出来的，这就是为什么你必须在这个文件夹中为每个组件都有一个文件的原因。此外，模板将从此处的主应用程序中提取，因此可以按照通常在 ember 应用程序（、、和标准分辨率）中访问模板的方式访问render它们partial。

有些人选择将他们所有的组件代码放在 中app/，但这是一个坏主意，因为该addon/文件夹不仅作为插件代码的分离存在，而且作为使用 ES6 导入来导入它的一种方式。因此，虽然您不能直接访问 下的组件addon/components/，但您可以将它们导入到您的应用程序中，如下所示：

import SomeComponent from 'some-addon/components/some-component'

如果他们想要扩展插件以添加一些功能，这对于插件消费者非常有用。

模板在addon构建树中预编译，这使得插件更加健壮（例如，如果它们使用不同版本的 htmlbars，它们仍将与基本应用程序兼容）。但是，它们无法通过解析器访问，因此您必须在插件的组件中手动导入它们，这就是插件组件的蓝图如下所示的原因：

import Ember from 'ember';
import layout from '../templates/components/some-component';

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

插件的样式可以放在addon/styles/或中app/styles/。默认情况addon/styles/下，它们也被预编译并包含在应用程序中。我强烈建议在其中包含样式，app/styles因为这样可以使用基础应用程序中的预处理器导入来访问它们：

@import some-addon/main.css

这使得它们对于插件的用户来说完全是可选app.import的，而无需诉诸config诡计（这很好，因为嵌套的插件 _do 不支持app.import。不要使用它。）

注意：它们不会自动命名空间，因此您应该将样式放在一个文件夹中，以确保它们不会与其他插件样式冲突。

总之：

  • 任何不需要由基础应用程序通过帮助程序、初始化程序等直接访问的插件代码。应该存在addon/
  • 您希望通过 ES6 导入访问的任何内容都应该存在addon/
  • 模板应该存在addon/templates/并手动导入
  • 应该包含在标准 Ember 构建链中的组件存根、初始化程序和其他文件应该存在于app/
  • 样式应该存在app/styles/并且应该在文件夹中命名（例如app/styles/some-addon/）
  • 不要使用app.import.
于 2015-05-10T06:10:54.637 回答