共计 2714 个字符，预计需要花费 7 分钟才能阅读完成。
作者：京东批发 佟恩
本文介绍，如何应用 NutUI 组件库，搭建一套为专属业务格调的业务组件库。
NutUI 是一款京东格调的挪动端组件库。NutUI 目前反对 Vue 和 React 技术栈，反对 Taro 多端适配。
当下的实现形式
个别组件库，都会给用户提供批改主题的形式。比方在 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 组件库提供通过编写一套自定义主题的款式文件，间接笼罩现有款式文件，实现主题定制。
// 新建一个 SCSS 文件 custom_theme.scss 进行自定义
// 主色调
$primary-color: #478EF2;
$primary-color-end: #496AF2;
// vue 版本
{test: /\.(sa|sc)ss$/,
use: [
{
loader: 'sass-loader',
options: {
// 留神：在 sass-loader 不同版本，这个选项名是 是不一样的，具体可参考 sass-loader 对应的版本文档
data: `@import "@/assets/custom_theme.scss";@import "@nutui/nutui-react/dist/styles/variables.scss";`,
}
}
]
}
以后问题与解决思路
以上两种形式，对于咱们实现单个我的项目来讲，还是比较简单的，然而如果咱们业务条线下的每一个我的项目都须要这样接入，那这个接入形式就会显得蠢笨起来。
那咱们怎么能力优雅的接入呢？
咱们的思路是，NutUI 与业务侧一起，独特输入一套属于本人业务格调的组件库。 其中，NutUI 提供组件库反对主题定制的配置和编译能力，业务侧输入交互与视觉标准，共同完成组件库的适配计划，输入定制化组件库的 NPM 包，进而在业务我的项目中提供反对。
这样，在业务开发中，就再也不必关注主题定制实现的问题了。
落地计划
明确方向后，咱们基于现有组件库的架构，给到了订正计划，梳理流程如下：
以下，咱们将拆解落地计划，以便大家更好的接入。
适配层：减少编译配置和执行脚本
在适配层，咱们心愿能够缩小开发者构建组件库我的项目的老本，为开发者提供一套疾速的构建脚本工具。比方，能够应用 npm run dev 能够疾速的启动本地我的项目，npm run test 可启动单测验证，而 npm run dev:taro:weapp 能够启动本地适配 Taro 的我的项目。
在此基础上，咱们减少了适配业务线的编译项，如可应用 npm run dev:taro:weapp:jmapp 来启动本地「适配京麦业务（jmapp）格调」的「适配 Taro」的我的项目」。
具体实现如下：
"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",
即通过设置环境变量 projectId=’jmapp’ 的形式，告知编译脚本以后所运行的业务线，以适配业务线所依赖的主题变量文件或字体文件等。如咱们会在 load-style.js 文件中依据 projectId 援用不同的文件信息，如下：
const projectId = process.env.VITE_APP_PROJECT_ID
if (nameLowerCase === 'icon') {
rewrite =
`import '../../../styles/font${projectId ? `-${projectId}` : ''}/iconfont.css'\n` + rewrite
}
同样，咱们会按此批改 theme 生成文件等。与此同时，咱们也会在这一层实现 demo 演示的适配计划，即批改 demo app.tsx 里引入的变量文件门路，办法相似。
组件层：减少变量文件、按业务视觉标准适配组件
1、减少变量文件
在实现适配层后，须要在相应的目录下，减少须要的变量文件和字体文件，咱们能够间接拷贝原主题，并批改为咱们须要的名字，如 variables-jmapp.scss。这时，启动 npm run dev:taro:weapp:jmapp，就会看到和默认主题统一的 demo 出现。
接下来，就须要依照业务方提供的视觉标准，将已提取的 CSS 变量值订正为业务视觉中的变量值，如：
// 默认品牌色 - 京东主题色
$brand-color: var(--nutui-brand-color, #fa2c19) !default;
// 订正后品牌色 - 京麦主题色
$brand-color: var(--nutui-brand-color, #3768fa) !default;
以此来推，一一 check 并订正变量值。你就会看到这样的成果转变，从一开始右侧的京东主题变为左侧的京麦主题，如图示：
主题差别展现
2、按业务视觉标准适配组件
个别，业务侧会有一些非凡的交互方式，而如果这些交互方式能够转化为通用交互方式时，就会倡议把这些交互方式落到组件库的实现里，那这时候就意味着组件库有增强性能的输入。而这也是在组件库做业务标准适配时，耗时较多的一环。
本次通过与京麦团队的深度单干，咱们也减少了 20+ 组件性能的新增，加强了 NutUI 组件库的适配能力，更多细节可参看 NutUI 新增 Demo 演示。
输入层：Demo 与业务主题定制包
在组件层，咱们启动本地运行脚本，即可展现残缺的 Demo 演示，咱们通过 Demo 演示，疾速 check 以后组件库是否曾经笼罩业务视觉标准，如确定已齐全实现验证，这时，咱们就具备了公布主题定制包的条件。
接下来咱们只须要编译并公布主题包即可。其中，编译脚本局部相似默认包的公布，配置逻辑参考第一步适配层。
而公布流程，参考如下。在测试阶段，咱们倡议公布 beta 版本。
用户层：验证主题定制包
验证主题包，如应用其余一般包一样，咱们引入包并装置运行，就能够看到咱们的应用成果了。
小结
通过以上操作，咱们就能够为咱们的业务线来定制主题了，堪称一劳永逸，团队小伙伴再也不必在应用组件库与主题定制之间做衡量了。
不知你心动了没。如果心动，就来尝试应用 NutUI 来实现本人的一套业务主题包吧。