kpc v0.7.8 发布,同时支持 Vue/React/Intact 的前端组件库
栏目: JavaScript · 发布时间: 5年前
内容简介:目前市面上已经存在大量组件库,我们为什么还要造这个轮子呢?下面我们解释下这个组件库开发的动机。随着公司业务和团队的壮大,我们很难统一全公司的技术栈,或者也没有必要统一全公司技术栈。众所周知, 前端单页应用的开发无非基于3大框架:React/Vue/Angular。如果不同框架维护一套自己的组件库,一方面 维护成本非常高,存在大量重复劳动力;另一方面,即使大家都按统一的交互设计稿开发组件库,也很难保证 各个组件库交互和设计的完全统一。所以这时kpc应运而生,它存在的意义就是:同一套组件库适应不同框架 (Wr
动机
目前市面上已经存在大量组件库,我们为什么还要造这个轮子呢?下面我们解释下这个组件库开发的动机。
随着公司业务和团队的壮大,我们很难统一全公司的技术栈,或者也没有必要统一全公司技术栈。众所周知, 前端单页应用的开发无非基于3大框架:React/Vue/Angular。如果不同框架维护一套自己的组件库,一方面 维护成本非常高,存在大量重复劳动力;另一方面,即使大家都按统一的交互设计稿开发组件库,也很难保证 各个组件库交互和设计的完全统一。所以这时kpc应运而生,它存在的意义就是:同一套组件库适应不同框架 (Write once, run anywhere)
特性
安装
在Intact下
npm install intact kpc --save
在Vue下
npm install kpc intact intact-vue --save
webpack配置
module.exports = { ... resolve: { alias: { 'intact$': 'intact-vue', } } }
在React下
npm install kpc intact intact-react --save
webpack配置
module.exports = { ... resolve: { alias: { 'intact$': 'intact-react', } } }
使用
在Intact下
import {Button} from 'kpc'; <Button>Hello</Button>
在Vue下
<template> <Button>Hello</Button> </template> <script> import {Button} from 'kpc'; export default { components: { Button } } </script>
在React下
import React from 'react'; import {Button} from 'kpc'; class App extends React.Component { render() { return <Button>Hello</Button> } }
链接
常见问题
1. 使用兼容层来兼容不同的框架,是否有性能损失?
性能损失非常小,因为兼容层并不会出来太多的东西,仅仅只是完成不同框架执行上下文的切换,唯一带来的损失 可能是框架需要引入兼容层和Intact底层库所带来的打包文件的增大,但只是增大了大概80KB(没有开启gzip)的体积, 相比目前前端项目动辄几M的打包文件,增大的并不多
2. 兼容层能实现100%的兼容吗?
如上所述,兼容层仅仅完成上下文的切换,本质上还是谁的元素谁去渲染,所以理论上能实现100%的兼容, 但目前考虑到实际使用情况并没有实现100%兼容,有些注意事项已在文档中说明,如果有需求后面我们会 逐步完善来达到100%兼容性
以上所述就是小编给大家介绍的《kpc v0.7.8 发布,同时支持 Vue/React/Intact 的前端组件库》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。