简单地建立Ember CLI Addons

在开始本篇文章前，先介绍下ember的背景。Ember是个用于构建大型网页应用的框架。Ember CLI可以很方便的使大型网页应用在浏览器中运行。ember做了许多,所以可以快速上手、使项目运行。打包工具、ES6模块转义、单元测试都可以直接使用。这样可以集中精力处理更重要的东西。它有一个真正关心ember发展的优秀社区。总之，它是个很棒的框架。我现在就不再滔滔不绝地讲下去了，继续讲我想讲的内容。Addons.

注：rjackson 是Ember团队的核心成员，他提交了将addons带入Ember CLI的PR, 并且他已将此话题写成了文章。了解更多精彩内容请点击这里 。

Ember CLI最令我兴奋的事情之一就是可以轻松地在Ember应用程序之间共享可重用代码。最近，addons出现了。(在0.0.35),我有一个组件在Ember CLI的app中看起来能够完美地适应。它是集成/单元测试，共享代码的方法是复制和粘贴相关部分（这不理想）。所以我将这部分转为一个addon.下面就来了解下它！

# Roadmap

所以我们要做的是准备一个Ember应用程序让它成为Ember插件，大致结构搭建非常简单：

• 配置package.json
• 编写ember-addon-main文件来包含其他文件
• 设置文件夹结构

# Setup package.json

Ember CLI在package.json中查找ember-addon关键字，如果有该关键字就将这个包(package)识别为addon，并将其删除。

"keywords": [
  "ember-addon"
],
"ember-addon-main": "lib/ember-addon-main.js"

当Ember CLI识别到是 ember-addon时，它将自动寻找 ember-addon-main属性（如果没找到默认找 main属性)。现在事情变得更有趣了。Ember CLI将会读取 lib/ember-addon-main.js并且使用其输出的构造器结合 treeFor和 included方法创建一个实例。

# Write ember-addon-main.js

我将使用ember-cli-super-number中的 ember-addon-main.js。如果你想查阅完整的文件，阅读这里。

EmberCLISuperNumber.prototype.treeFor = function treeFor(name) {
  var treePath =  path.join('node_modules', 'ember-cli-super-number', name + '-addon');

  if (fs.existsSync(treePath)) {
    return unwatchedTree(treePath);
  }
};

EmberCLISuperNumber.prototype.included = function included(app) {
  this.app = app;

  this.app.import('vendor/ember-cli-super-number/styles/style.css');
};

treeFor方法分别会为 app、 styles、 vendor调用一次。该方法会返回一个tree,它能合并进应用 app、 styles或者 vendor目录。

如果你好奇如何做到的(从原来的PR中)

在这个例子中，我们深入 ember-cli-super-number/app-addon的addon(在node_modules内)。在39行中返回。 unwatchedTree方法确保监视器不会监控包含文件的变化。

你或许会好奇为什么在 treeFor方法中app目录ember-cli-super-number的有'-addon'后缀。

## Understanding the '-addon' suffix

这一段需要做一些说明。Ember CLI 的addons发展迅速。正因如此，关于addons如何实现的会议至今仍未尘埃落定。当移动ember-cli-super-number到addon中时，我们希望能够保持集成/单元测试的一致性。但是我们又不想在应用中测试它任何不必要的文件。所以，我们决定建立一个 app-addon目录。在本地对于ember-cli-super-number，我们将在我们的Brocfile文件的 newEmberApp方法调用之前合并 app和 app-addon。

这允许我们通过添加 -addon构建tree(在ember-addon-main脚本中)只返回treeFor相关的文件， 同时还能保持应用像之前一样在本地运行。

这有两个好处。应用只需包含相关的文件（如上面提到的那样）。而且，我们可以像在本地添加另一个Ember CLI应用程序一样。这让单元测试变得简单而方便，实际上，ember-cli-super-number 的测试不需要因为它成为addon而改变。

使用Broccoli合并这些tree相当简单：

var mergeTrees = require('broccoli-merge-trees');

var appTree    = mergeTrees(['app', 'app-addon'], { overwrite: true });
var vendorTree = mergeTrees(['vendor', 'vendor-addon']);

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

var app = new EmberApp({
  trees: {
    app: appTree,
    vendor: vendorTree
  }
});

我已经为verdor-addon做了同样的事，而且如果必要的话可以为styles做同样的事。以上简单地整合了app和app-addon，然后再将其应用于EmberApp。

我想强调的是这些约定仍然还在不断的变化中。另一个选择是整合 app和 tests/dummy目录。在这种情况下，我们也可以达到同样的目的，但 app目录将只包含addon文件，而 tests/dummy将包含其余的Ember CLI应用程序。（这种方式受影响于Rails引擎测试）

# The included hook

我们创建的ember-cli-super-number组件也需要有css。为了实现此，我们需要使用 included钩子。该钩子被 EmberApp构造器调用，并给app传入 this。这是放置我们的CSS的完美之地。

你可以在这里看看它如何被调用（从最初的PR中）。

你可能记得之前我们有个 vendor-addon文件夹。这就是我们放置css的地方。然后在 included钩子中将 app导入到 vendor目录。这样做的原因是，如果在这里添加，它会在 app/index.html文件(在应用中的)中自动关联到 assets/vendor的css的link。

这对于super-number组件来说似乎是一个明智的默认，因为它需要一些css的功能，但是它会使包含应用程序的灵活性变得很大，因为它会强制包含应用程序实现自己的css（或复制它） ）。这是每个个别用例的决定。

# Publishing

完成上述之后，您必须从package.json中删除“private”：true，并在命令行调用npm publish.现在你就可以通过 npm install ember-cli---save-dev安装addon，然后使用。

你也可以添加 .npmignore文件用来忽略 app、 vendor和 tests防止它被做为包的一部分提交上传（可以让下载更加快速）。

在我们的例子中，你可以调用：

npm install ember-cli-ember-super-number--save-dev

然后在你的模版中调用 {{super-number}}来使用超级数字组件。

# Fin

我个人认为这真的是太棒了。正在推动addon历史的人们正在努力使这个东西变得容易和易于人使用，同时也建立了适用于广泛人群的约定。因此，我非常感谢他们。衷心感谢！

希望我没有过分重复这个话题。实际上设置起来很简单。我想进一步了解一些细节，而addon太新，导致addon上的文档如此稀疏。无论如何，我都希望这能帮助大家。

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。