创建一个 ember-cli-addon

mo0n1andin 发布于2019-08-19 17:33 / 1550人阅读

摘要：最近公司主项目用到了，虽然当前前端业内推崇但是接触到过后，被的工程化震撼到了，相比于，前者算是一个而后者更应该算是一个框架，这篇文章的主题不打算完整的介绍一下，出于公司需要建一个公共组件库的目的，这里介绍一下相关的技术细节为什么需要

最近公司主项目用到了 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创建一个目录自己怎样创建一个网站怎么创建一个视频网站

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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