建立一个 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 的部份,我直接供应文章参考链接了,本文更多的引见一些个中碰到的细节题目和症结点

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 了

    原文作者:陈学家_6174
    原文地址: https://segmentfault.com/a/1190000004398992
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞