創建一個 ember-cli-addon

mo0n1andin 發布于2019-08-19 17:33 / 1587人閱讀

摘要：最近公司主項目用到了，雖然當前前端業內推崇但是接觸到過后，被的工程化震撼到了，相比于，前者算是一個而后者更應該算是一個框架，這篇文章的主題不打算完整的介紹一下，出于公司需要建一個公共組件庫的目的，這里介紹一下相關的技術細節為什么需要

最近公司主項目用到了 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 目錄一致，有兩個需要注意的點：

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

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 了

云服務器 GPU云服務器創建一個數據倉庫 php創建一個目錄自己怎樣創建一個網站怎么創建一個視頻網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78623.html

面向對象的程序設計之創建對象

摘要：對象的定義無序屬性的集合屬性的值可以是基本值對象或者函數每個對象都是基于一個應用類型創建的這個引用類型可以是內置的例如也可以是用戶自定義的基于創建對象所有的對象都是繼承自的因此我們可以從著手創建對象通過關鍵字創建對象通過對象字面量創建對象基對象的定義：無序屬性的集合,屬性的值可以是基本值、對象或者函數.每個對象都是基于一個應用類型創建的,這個引用類型可以是內置的(例如Object A...

acrazing 2019-08-21 10:41 評論0 收藏0
Android存儲方式之SQLite

摘要：前言數據庫操作在開發中非常常用今天我將帶大家全面了解關于數據庫的操作增刪查改目錄數據庫介紹是內置的一個小型關系型屬于文本型的數據庫。提供了對數據庫的完全支持，應用程序中的任何類都可以通過名稱來訪問任何的數據庫，但是應用程序之外的就不能訪問。前言 SQLite數據庫操作在Android開發中非常常用今天我將帶大家全面了解關于SQLite數據庫的操作（增、刪、查、改）目錄 sho...

rainyang 2019-08-16 10:51 評論0 收藏0
JavaScript工廠模式

摘要：基于工廠角色和產品角色的多態性設計是工廠方法模式的關鍵。工廠方法模式之所以又被稱為多態工廠模式，是因為所有的具體工廠類都具有同一抽象父類。工廠方法模式總結工廠方法模式是簡單工廠模式的進一步抽象和推廣。 JavaScript工廠模式首先需要說一下工廠模式。工廠模式根據抽象程度的不同分為三種簡單工廠模式工廠方法模式抽象工廠模式 1.簡單工廠模式簡單工廠模式:又稱為靜態工廠方法...

oujie 2019-08-21 18:33 評論0 收藏0
超全的設計模式簡介（45種）

摘要：設計模式是軟件開發人員在軟件開發過程中面臨的一般問題的解決方案。設計模式的類型共有種設計模式。工廠模式工廠模式最常用的設計模式之一。這種類型的設計模式屬于創建型模式，它提供了一種創建對象的最佳方式。該文建議配合 design-patterns-for-humans 中文版一起看。推薦閱讀超全的設計模式簡介（45種） design-patterns-for-humans 中文版...

wdzgege 2019-07-01 12:41 評論0 收藏0