作者：京東零售 佟恩
本文介紹，如何使用 NutUI 組件庫，搭建一套為專屬業(yè)務(wù)風(fēng)格的業(yè)務(wù)組件庫。
NutUI 是一款京東風(fēng)格的移動(dòng)端組件庫。NutUI 目前支持 Vue 和 React技術(shù)棧，支持Taro多端適配。
當(dāng)下的實(shí)現(xiàn)方式
一般組件庫，都會(huì)給用戶提供修改主題的方式。比如在 NutUI 組件庫中，給用戶提供了兩種方式：
- 修改CSS變量，NutUI 組件庫支持通過全局配置組件 ConfigProvider 組件完成主題定制；
const customTheme = {
nutuiBadgeBorderRadius: '12px 12px 12px 0',
}
<ConfigProvider theme={customTheme}>
<Badge value="NEW">
<Avatar icon="my" shape="square" />
</Badge>
</ConfigProvider>
- 通過SCSS 變量，NutUI 組件庫提供通過編寫一套自定義主題的樣式文件，直接覆蓋現(xiàn)有樣式文件，完成主題定制。
// 新建一個(gè) SCSS 文件 custom_theme.scss 進(jìn)行自定義
// 主色調(diào)
$primary-color: #478EF2;
$primary-color-end: #496AF2;
// vue 版本
{
test: /\.(sa|sc)ss$/,
use: [
{
loader: 'sass-loader',
options: {
// 注意：在 sass-loader 不同版本，這個(gè)選項(xiàng)名是 是不一樣的，具體可參考 sass-loader對(duì)應(yīng)的版本文檔
data: `@import "@/assets/custom_theme.scss";@import "@nutui/nutui-react/dist/styles/variables.scss";`,
}
}
]
}
當(dāng)前問題與解決思路
以上兩種方式，對(duì)于我們實(shí)現(xiàn)單個(gè)項(xiàng)目來講，還是比較簡單的，但是如果我們業(yè)務(wù)條線下的每一個(gè)項(xiàng)目都需要這樣接入，那這個(gè)接入方式就會(huì)顯得笨拙起來。
那我們?cè)趺床拍軆?yōu)雅的接入呢？
我們的思路是，NutUI 與業(yè)務(wù)側(cè)一起，共同輸出一套屬于自己業(yè)務(wù)風(fēng)格的組件庫。 其中，NutUI 提供組件庫支持主題定制的配置和編譯能力，業(yè)務(wù)側(cè)輸出交互與視覺規(guī)范，共同完成組件庫的適配方案，輸出定制化組件庫的 NPM 包，進(jìn)而在業(yè)務(wù)項(xiàng)目中提供支持。
這樣，在業(yè)務(wù)開發(fā)中，就再也不用關(guān)注主題定制實(shí)現(xiàn)的問題了。
落地方案
明確方向后，我們基于現(xiàn)有組件庫的架構(gòu)，給到了修訂方案，梳理流程如下：
以下，我們將拆解落地方案，以便大家更好的接入。
適配層：增加編譯配置和執(zhí)行腳本
在適配層，我們希望可以減少開發(fā)者構(gòu)建組件庫項(xiàng)目的成本，為開發(fā)者提供一套快速的構(gòu)建腳本工具。比如，可以使用 npm run dev 可以快速的啟動(dòng)本地項(xiàng)目，npm run test 可啟動(dòng)單測驗(yàn)證，而 npm run dev:taro:weapp可以啟動(dòng)本地適配 Taro 的項(xiàng)目。
在此基礎(chǔ)上，我們?cè)黾恿诉m配業(yè)務(wù)線的編譯項(xiàng)，如可使用 npm run dev:taro:weapp:jmapp 來啟動(dòng)本地「適配京麥業(yè)務(wù)（jmapp）風(fēng)格」的「適配Taro」的項(xiàng)目」。
具體實(shí)現(xiàn)如下：
"dev:taro:weapp:jmapp": "VITE_APP_PROJECT_ID=jmapp npm run generate:file:taro:pages && cd ./src/sites/mobile-taro && npm run dev:weapp:jmapp",
即通過設(shè)置環(huán)境變量 projectId=‘jmapp’ 的方式，告知編譯腳本當(dāng)前所運(yùn)行的業(yè)務(wù)線，以適配業(yè)務(wù)線所依賴的主題變量文件或字體文件等。如我們會(huì)在load-style.js 文件中根據(jù) projectId 引用不同的文件信息，如下：
const projectId = process.env.VITE_APP_PROJECT_ID
if (nameLowerCase === 'icon') {
rewrite =
`import '../../../styles/font${
projectId ? `-${projectId}` : ''
}/iconfont.css'\n` + rewrite
}
同樣，我們會(huì)按此修改 theme 生成文件等。與此同時(shí)，我們也會(huì)在這一層完成 demo 演示的適配方案，即修改demo app.tsx 里引入的變量文件路徑，方法類似。
組件層：增加變量文件、按業(yè)務(wù)視覺規(guī)范適配組件
1、增加變量文件
在完成適配層后，需要在相應(yīng)的目錄下，增加需要的變量文件和字體文件，我們可以直接拷貝原主題，并修改為我們需要的名字，如variables-jmapp.scss。這時(shí)，啟動(dòng) npm run dev:taro:weapp:jmapp，就會(huì)看到和默認(rèn)主題一致的 demo 呈現(xiàn)。
接下來，就需要按照業(yè)務(wù)方提供的視覺規(guī)范，將已提取的 CSS 變量值修訂為業(yè)務(wù)視覺中的變量值，如：
// 默認(rèn)品牌色-京東主題色
$brand-color: var(--nutui-brand-color, #fa2c19) !default;
// 修訂后品牌色-京麥主題色
$brand-color: var(--nutui-brand-color, #3768fa) !default;
以此來推，一一check并修訂變量值。你就會(huì)看到這樣的效果轉(zhuǎn)變，從一開始右側(cè)的京東主題變?yōu)樽髠?cè)的京麥主題，如圖示：
主題差異展示
2、按業(yè)務(wù)視覺規(guī)范適配組件
一般，業(yè)務(wù)側(cè)會(huì)有一些特殊的交互方式，而如果這些交互方式可以轉(zhuǎn)化為通用交互方式時(shí)，就會(huì)建議把這些交互方式落到組件庫的實(shí)現(xiàn)里，那這時(shí)候就意味著組件庫有加強(qiáng)功能的輸出。而這也是在組件庫做業(yè)務(wù)規(guī)范適配時(shí)，耗時(shí)較多的一環(huán)。
本次通過與京麥團(tuán)隊(duì)的深度合作，我們也增加了 20+ 組件功能的新增，增強(qiáng)了 NutUI 組件庫的適配能力，更多細(xì)節(jié)可參看NutUI 新增 Demo 演示。
輸出層：Demo 與業(yè)務(wù)主題定制包
在組件層，我們啟動(dòng)本地運(yùn)行腳本，即可展示完整的 Demo 演示，我們通過 Demo 演示，快速 check 當(dāng)前組件庫是否已經(jīng)覆蓋業(yè)務(wù)視覺規(guī)范，如確定已完全完成驗(yàn)證，這時(shí)，我們就具備了發(fā)布主題定制包的條件。
接下來我們只需要編譯并發(fā)布主題包即可。其中，編譯腳本部分類似默認(rèn)包的發(fā)布，配置邏輯參考第一步適配層。
而發(fā)布流程，參考如下。在測試階段，我們建議發(fā)布beta版本。
用戶層：驗(yàn)證主題定制包
驗(yàn)證主題包，如使用其他普通包一樣，我們引入包并安裝運(yùn)行，就可以看到我們的使用效果了。
小結(jié)
通過以上操作，我們就可以為我們的業(yè)務(wù)線來定制主題了，可謂一勞永逸，團(tuán)隊(duì)小伙伴再也不用在使用組件庫與主題定制之間做權(quán)衡了。文章來源：http://www.zghlxwxcb.cn/news/detail-434911.html
不知你心動(dòng)了沒。如果心動(dòng)，就來嘗試使用 NutUI 來完成自己的一套業(yè)務(wù)主題包吧。文章來源地址http://www.zghlxwxcb.cn/news/detail-434911.html
到了這里，關(guān)于使用 NutUI 搭建「自定義業(yè)務(wù)風(fēng)格」的組件庫 | 京東云技術(shù)團(tuán)隊(duì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
