創(chuàng)建一個(gè) ember-cli-addon

mo0n1andin 發(fā)布于2019-08-19 17:33 / 1596人閱讀

摘要：最近公司主項(xiàng)目用到了，雖然當(dāng)前前端業(yè)內(nèi)推崇但是接觸到過后，被的工程化震撼到了，相比于，前者算是一個(gè)而后者更應(yīng)該算是一個(gè)框架，這篇文章的主題不打算完整的介紹一下，出于公司需要建一個(gè)公共組件庫的目的，這里介紹一下相關(guān)的技術(shù)細(xì)節(jié)為什么需要

最近公司主項(xiàng)目用到了 ember + ember-cli，雖然當(dāng)前前端業(yè)內(nèi)推崇 react , 但是接觸到 ember-cli 過后，被 ember-cli 的工程化震撼到了，相比于 react，前者算是一個(gè) lib , 而后者更應(yīng)該算是一個(gè)框架，這篇文章的主題不打算完整的介紹一下 ember，出于公司需要建一個(gè)公共組件庫的目的，這里介紹一下 ember-addon 相關(guān)的技術(shù)細(xì)節(jié)

為什么需要 addon

addon 也就是插件模式，對(duì)于有多個(gè) ember-cli 項(xiàng)目的情況，需要將公共的部分以組件的方式剝離出來，addon 就是 ember-cli 提供的剝離方式

如何創(chuàng)建一個(gè) addon

如何創(chuàng)建一個(gè) addon 的部分，我直接提供文章參考鏈接了，本文更多的介紹一些其中遇到的細(xì)節(jié)問題和關(guān)鍵點(diǎn)

DEVELOPING ADDONS AND BLUEPRINTS

Creating an Ember.js Addon with the Ember CLI

ember-cli 加載addon 的方式

ember addon 是通過 npm 模塊管理的，可以將 addon 發(fā)布到 npm 倉庫當(dāng)中，當(dāng)運(yùn)行 ember s 的時(shí)候， ember-cli 會(huì)根據(jù) package.json 里邊的依賴遍歷所有組件，如果發(fā)現(xiàn)組件的 package.json 的 keywords 里邊有

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

那么就判斷為一個(gè) ember addon 并加載

addon 目錄結(jié)構(gòu)

主要的幾個(gè)目錄:

app

addon

vendor

對(duì)于 app 目錄，ember-cli 會(huì)將這個(gè)目錄合并到項(xiàng)目的 app 目錄中，合并并不是意味著寫法能完全和項(xiàng)目 app 目錄一致，有兩個(gè)需要注意的點(diǎn)：

app 不支持 pod 方式，具體參考這個(gè) issue Templates in pods from addons

style 不支持 less、sass

對(duì)于 addon 目錄里邊的文件，可以在項(xiàng)目代碼里邊當(dāng)模塊 import 進(jìn)去，比如

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

app 目錄合并，addon 目錄引用這兩個(gè)點(diǎn)應(yīng)該是 addon 機(jī)制的核心，理解了就知道怎么去創(chuàng)建一個(gè)組件了

對(duì)于 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 開發(fā)測(cè)試

寫完 addon 總要有地方看看 addon 寫成什么樣子，目前有兩種方式

第一種

在 your-addon/test 目錄下面有個(gè) dummy project

 your-addon$ ember s

直接在 addon 項(xiàng)目目錄啟動(dòng)服務(wù)，會(huì)基于 dummy 項(xiàng)目啟動(dòng)一個(gè) project，這個(gè)項(xiàng)目和其他的項(xiàng)目完全一樣，找到 application.hbs , 在其中引用組件就行

第二種

在一個(gè)項(xiàng)目中直接引用組件, 通過 npm link 的方式在項(xiàng)目中建立一個(gè)對(duì)組件的映射

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

常見的一個(gè)問題

初始化的項(xiàng)目 ember s ，打開瀏覽器會(huì)報(bào)錯(cuò)，原因是 jQuery 的版本問題（這都能 breakdown 整個(gè)項(xiàng)目，醉了），修改 bower.json 中的 jQuery 版本為 1.11.3 , 重新 bower install 就能 work 了