建立一个 ember-cli-addon

最近公司主项目用到了 ember + ember-cli，虽然当前前端业内推崇 react , 可是接触到 ember-cli 事后，被 ember-cli 的工程化震撼到了，相比于 react， 前者算是一个 lib , 然后者更应该算是一个框架，这篇文章的主题不打算完整的介绍一下 ember，出于公司须要建一个公共组件库的目的， 这里介绍一下 ember-addon 相关的技术细节

为何须要 addon

addon 也就是插件模式，对于有多个 ember-cli 项目的状况，须要将公共的部分以组件的方式剥离出来，addon 就是 ember-cli 提供的剥离方式

如何建立一个 addon

如何建立一个 addon 的部分，我直接提供文章参考连接了，本文更多的介绍一些其中遇到的细节问题和关键点

• DEVELOPING ADDONS AND BLUEPRINTS

• Creating an Ember.js Addon with the Ember CLI

ember-cli 加载addon 的方式

ember addon 是经过 npm 模块管理的，能够将 addon 发布到 npm 仓库当中， 当运行 ember s 的时候， ember-cli 会根据 package.json 里边的依赖遍历全部组件，若是发现组件的 package.json 的 keywords 里边有

"keywords": [
  "ember-addon",
  ...
]

那么就判断为一个 ember addon 并加载

addon 目录结构

主要的几个目录:

• app

• addon

• vendor

对于 app 目录，ember-cli 会将这个目录合并到 项目的 app 目录中，合并并非意味着写法能彻底和项目 app 目录一致，有两个须要注意的点：

1. app 不支持 pod 方式，具体参考这个 issue Templates in pods from addons

2. style 不支持 less、sass

对于 addon 目录里边的文件，能够在项目代码里边当模块 import 进去，好比

// file your-addon/addon/components/your-component.js
import co from 'your-addon/components/your-component'

app 目录合并，addon 目录引用这两个点应该是 addon 机制的核心， 理解了就知道怎么去建立一个组件了

对于 vendor 目录里边的文件，能够直接经过 'your-addon/vendor/file' 的路径引用, 因此若是想在 addon 中使用 less, 能够以下方式

// file your-addon/vendor/styles/style.less
// project/app/style/app.less
import 'your-addon/vendor/styles/style.less';

ember-cli 开发测试

写完 addon 总要有地方看看 addon 写成什么样子，目前有两种方式

第一种

在 your-addon/test 目录下面有个 dummy project

your-addon$ ember s

直接在 addon 项目目录 启动服务， 会基于 dummy 项目启动一个 project，这个项目和其余的项目彻底同样，找到 application.hbs , 在其中引用组件就行

第二种

在一个项目中直接引用组件, 经过 npm link 的方式在项目中创建一个对组件的映射

your-addon$ npm link
your-project: npm link your-addon
your-project: vim package.json // 依赖中添加 "your-addon": "*"

常见的一个问题

初始化的项目 ember s ，打开浏览器会报错， 缘由是 jQuery 的版本问题（这都能 breakdown 整个项目，醉了），修改 bower.json 中的 jQuery 版本为 1.11.3 , 从新 bower install 就能 work 了