创建一个emberjs 的 addon

创建一个emberjs 的 addon

在实际项目中难免会需要公司内部来创建属于自己公司需求的组件或插件。当此组件足够公用的时候可以提取出来生成插件。

生成 插件 的文件

使用 ember-cli来生成插件的文件结构。在一个新的文件目录下运行这条命令，不要在一个emberjs 的应用程序文件夹内。

    ember addon ember-basic-ui 

这样我们就生成了一个叫做 ember-basic-ui的插件文件。
一般来说，我们生成的插件名使用ember来打头，更好的让开发者找到我们的插件。
需要注意的是 ember 的 addon 只能使用 基本(classic) 的ember项目文件结构。而不是Pods 文件结构。

addon 的文件结构

在某些方面，一个 addon 和 一个小型的 Ember app十分相似。它们拥有相似的文件结构以及一些相同的API 方法，并且都可以完成组件可以做的一些事情。
下面是addon 中的一些文件或文件夹，以及它们在 app 中的不同作用。

• addon/
  这个目录可以包含和 Ember 项目相同的一些子目录和文件，像/components/、/templates/。
• app/
  这个目录在帮助Ember app自动发现插件内的组件并导出方面发挥着重要作用。默认的生成组件的方式是将实现方法放入addon/中，这允许开发者导入和扩展这个插件的组件。但是，Ember app 总是在 app下寻找组件，所以我们必须在app/目录下重新导出组件。
  幸运的是，当我们在插件中执行 ember g component my-component-name 的时候， CLI 工作会帮我们做好导出组件的工作。它为我们生成必要的文件和代码。所以，addon 的开发者通常不需要在 app/ 目录下做任何工作。
• tests/dummy/
  这个目录包含一个完整的 Ember app，用于进行插件测试。通过测试我们可以看到我们写的组件是不是和我们预期一样。
• package.json
  If we want other people to be able to use our addon, we need to specify a name, license, version, the repository URL, and description. For an addon to show up on Ember Observer, it must have keywords: ["ember-addon"] and a repository URL.
• config/ember-try.js
  这是一个配置测试套件应该检查兼容性的哪些Ember版本的地方。查看 ember-try 查看更多。

尝试生成一个组件

说了这么多理论，来尝试生成一个插件的组件吧。
它就像是在 Ember app中生成组件一样:

ember g component p-button

可以看到命令行中出现：

installing component
  create addon/components/p-button.js
  create addon/templates/components/p-button.hbs
installing component-test
  create tests/integration/components/p-button-test.js
installing component-addon
  create app/components/p-button.js

可以看到的是 p-button.js和p-button.hbs文件放入了 addon/这个目录下，其他的进入了 app/和 tests/这两个目录。
我们在 addon/目录下的文件做的改动能立马在 程序中 显示出来，通过handlebars语法调用这个组件。

{{#if  hasBlock}}
	{{yield}}
{{else}}
	{{content}}
{{/if}}

import Component from  '@ember/component';
import layout from  '../templates/components/p-button'; 

export  default Component.extend({
	layout,
	tagName:  'button',
	content:  'test btn'
});

之后 在 /tests/dummy/app/某一handlebars 文件下调用下即可看到有 一个 button 显示在页面中。但是却没有样式。那如何在插件的组件中添加样式呢？

为生成的组件添加样式

目前大多数开发者都在使用 SCSS 来开发应用，但是如果你依旧使用的是 css ，那也无妨。

使用 css 样式文件

只需要在 addon/ 目录下创建 组件 名称相同的 css文件即可。如
addon/styles/p-button.css。
重新启动项目，可以看到样式没有变化，那大多是因为你没有在样式文件中添加样式。

使用 scss 样式文件

在 addon 中使用 scss 预处理器，需要安装一些依赖：

• 依赖:

yarn add sass ember-cli-sass

• 新建入口文件:
  addon/styles/addon.scss;
  app/styles/app.scss
• 在 addon/styles/addon.scss中引入样式文件 :

@import  './p-button.scss';

重启项目之后，可以看到样式已经使用上了。
如果还有其他报错，可以查看 这里 来查询原因。

Written By FrankWang.