建立一個 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 了