简单地建立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并且使用其输出的构造器结合 treeForincluded方法创建一个实例。

# 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方法分别会为 appstylesvendor调用一次。该方法会返回一个tree,它能合并进应用 appstyles或者 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方法调用之前合并 appapp-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。

我想强调的是这些约定仍然还在不断的变化中。另一个选择是整合 apptests/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文件用来忽略 appvendortests防止它被做为包的一部分提交上传(可以让下载更加快速)。

在我们的例子中,你可以调用:

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

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

# Fin

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

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


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



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

原文发布于微信公众号 - 京程一灯(jingchengyideng)

原文发表时间:2017-10-11

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券