建立一个 ember-cli-addon

2024年2月15日 299次阅读 来源: 陈学家_6174

近来公司主项目用到了 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞