动机
目前市面上已经存在大量组件库,我们为什么还要造这个轮子呢?下面我们解释下这个组件库开发的动机。
随着公司业务和团队的壮大,我们很难统一全公司的技术栈,或者也没有必要统一全公司技术栈,但是统一 全公司所有产品线的设计和交互风格,却是很有必要的。众所周知,前端单页应用的开发无非基于3大框架: React/Vue/Angular。如果不同框架维护一套自己的组件库,一方面维护成本非常高,存在大量重复劳动力; 另一方面,即使大家都按统一的交互设计稿开发组件库,也很难保证各个组件库设计和交互的完全统一。 这就是我们开发KPC的目的,它存在的意义就是:同一套组件库源码适应不同框架,来保证不同技术栈所开发出来的产品 的风格统一(write once, run anywhere)
特性
浏览器支持
IE / Edge |
Firefox |
Chrome |
Safari |
Opera |
---|---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
安装
npm install kpc --save
webpack配置
Intact
moduleexports = ... resolve: alias: 'kpc': 'kpc/@css'
Vue
moduleexports = ... resolve: alias: 'kpc': 'kpc/@vue/@css'
React
moduleexports = ... resolve: alias: 'kpc': 'kpc/@react/@css'
使用
Intact
; <Button>Hello</Button>
Vue
<template> <Button>Hello</Button></template><script>; components: Button </script>
React
import React from 'react';import Button from 'kpc'; Component { return <Button>Hello</Button> }
详情
Angular- 安装
npm install kpc-angular -S
- 配置
webpack.config.js
Angular CLI 初始化的项目必须使用@angular-builders/custom-webapck
来配置webpack
const path = ; module { configmodulerules; return config;};
- 使用
src/app/app.module.ts
;; ;;
;;
即时反馈
欢迎加入QQ群反馈问题和获得即时帮助,QQ群:529739732
链接
常见问题
1. 使用兼容层来兼容不同的框架,是否有性能损失?
性能损失非常小,因为兼容层并不会处理太多的东西,仅仅只是完成不同框架执行上下文的切换,唯一带来的损失 可能是框架需要引入兼容层和Intact底层库所带来的打包文件的增大,但只是增大了大概80KB(没有开启gzip)的体积, 相比目前前端项目动辄几M的打包文件,增大的并不多
2. 兼容层能实现100%的兼容吗?
如上所述,兼容层仅仅完成上下文的切换,本质上还是谁的元素谁去渲染,所以理论上能实现100%的兼容, 但目前考虑到项目中对各个特性的实际使用情况,并没有实现100%兼容,有些注意事项已在文档中说明, 如果对某个特性有需求,后面我们会逐步完善来达到100%兼容性
开发
需要
node@10
以及npm@6.9
以上
git clone https://github.com/ksc-fe/kpc.gitcd kpcnpm installnpm run dev:doc # 测试 npm run test# 更新测试快照 npm run snapshot# 部署文档 npm run deploy:doc# 发版 npm run release
许可
MIT