使用 NutUI 搭建「自定义业务风格」的组件库 | 京东云技术团队

原创
2023/05/06 09:27
阅读数 4.8K

作者:京东零售 佟恩

本文介绍,如何使用 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 来完成自己的一套业务主题包吧。

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
0 评论
3 收藏
0
分享
返回顶部
顶部