kpc支持 Intact/Vue/React 的前端組件庫(kù)
動(dòng)機(jī)
目前市面上已經(jīng)存在大量組件庫(kù)，我們?yōu)槭裁催€要造這個(gè)輪子呢？下面我們解釋下這個(gè)組件庫(kù)開發(fā)的動(dòng)機(jī)。
隨著公司業(yè)務(wù)和團(tuán)隊(duì)的壯大，我們很難統(tǒng)一全公司的技術(shù)棧，或者也沒有必要統(tǒng)一全公司技術(shù)棧。眾所周知， 前端單頁(yè)應(yīng)用的開發(fā)無(wú)非基于3大框架：React/Vue/Angular。如果不同框架維護(hù)一套自己的組件庫(kù)，一方面 維護(hù)成本非常高，存在大量重復(fù)勞動(dòng)力；另一方面，即使大家都按統(tǒng)一的交互設(shè)計(jì)稿開發(fā)組件庫(kù)，也很難保證 各個(gè)組件庫(kù)交互和設(shè)計(jì)的完全統(tǒng)一。所以這時(shí)kpc應(yīng)運(yùn)而生，它存在的意義就是：同一套組件庫(kù)適應(yīng)不同框架 (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';Hello
在Vue下
Helloimport {Button} from 'kpc';
export default {
components: {
Button
}
}
在React下
import React from 'react';
import {Button} from 'kpc';
class App extends React.Component {
render() {
return Hello }
}
鏈接
常見問題
1. 使用兼容層來(lái)兼容不同的框架，是否有性能損失？
性能損失非常小，因?yàn)榧嫒輰硬⒉粫?huì)出來(lái)太多的東西，僅僅只是完成不同框架執(zhí)行上下文的切換，唯一帶來(lái)的損失 可能是框架需要引入兼容層和Intact底層庫(kù)所帶來(lái)的打包文件的增大，但只是增大了大概80KB(沒有開啟gzip)的體積， 相比目前前端項(xiàng)目動(dòng)輒幾M的打包文件，增大的并不多
2. 兼容層能實(shí)現(xiàn)100%的兼容嗎？
如上所述，兼容層僅僅完成上下文的切換，本質(zhì)上還是誰(shuí)的元素誰(shuí)去渲染，所以理論上能實(shí)現(xiàn)100%的兼容， 但目前考慮到實(shí)際使用情況并沒有實(shí)現(xiàn)100%兼容，有些注意事項(xiàng)已在文檔中說(shuō)明，如果有需求后面我們會(huì) 逐步完善來(lái)達(dá)到100%兼容性
開發(fā)
git clone https://github.com/ksc-fe/kpc.git cd kpc npm install npm run dev:doc # 測(cè)試 npm run test # 更新測(cè)試快照 npm run snapshot # 部署文檔 npm run deploy:doc # 發(fā)版 npm run release