在Nx中创建和管理设计变体是团队在单列内建立可扩展的多经验应用的基本能力,设计变体——无论是A/B测试,特征标志,品牌主题,还是用户个人化界面——都需要一种结构化的方法来避免代码重复,保持一致性,并保持建设时间的快速. Nx作为一个具有高级建筑管弦和依赖图意识的智能单列变体工具,提供了几种有效的处理设计变体的证明技术,本条探讨了Nx中创建和管理设计变体的最佳方法,并有实例和可操作的最佳做法.

理解 Nx 中的设计变体

设计变体是指一个UI组件,样式集,或布局的多个版本,可以动态或构建时切换。在一个典型的Nx工作空间中,您可能有一个共享的UI库,被多个应用程序使用。如果没有固态变体策略,您可能会在应用软件之间重复代码,或者引入复杂的条件逻辑,从而变得不易。

设计变体使使用情况成为可能,例如:

  • A/B测试 –为用户组提供不同的按钮样式或布局.
  • 白标签 – 每个客户端都获得自定义的颜色方案和标志.
  • Feature previews – 推出新设计给一定比例的用户.
  • latform特定UIS – Mobile vs 桌面,或光/暗模式.

Nx的架构—— 其工程边界、依赖图和受影响的命令—— 使它适合管理这些情景,而不突破构建或膨胀您的代码库。

设计备选方法

1. 使用环境文件和构建时间变量

最简单和最可靠的方法之一是通过环境文件注入设计变种信息. Nx支持使用文件的环境特有配置和在您的或中的对象.

例如,你可能拥有:

  • - 含有]
  • - 含有]

然后在组件或 CSS 中,引用 (或 Nx 兼容 ] 前缀) 。此方法是干净的, 并且与任何前端框架配合。 对于样式变体, 您可以有条件导入一个主题样式表 :

if (theme === 'corporate') {
 import('./corporate-theme.scss');
} else {
 import('./startup-theme.scss');
}

Nx 的构建系统将树形摇摆未使用的样式,确保只捆绑所需的变体代码。当变体在构建时已知,而不需要在运行时切换时,这种方法是理想的。

2. CSS 自定义属性的样式和样式覆盖

对于运行时可切换的变体, CSS自定义属性(CSS变量)是一个强大的低成本解决方案。在共享样式表中定义一组基本变量,然后按变体覆盖它们。在Nx工作空间中,您可以创建一个导出主题对象的库(例如,])。

通过导入应用程序的切入点中的适当主题, 与 Nx 的构建进程融合。 对于反应或角, 您可以使用上下文/ 提供者对根元素动态应用主题类 :

.theme-corporate {
 --primary-color: #0055a5;
 --secondary-color: #ff6600;
}
.theme-startup {
 --primary-color: #6c63ff;
 --secondary-color: #ff6584;
}

然后在组件中,参考。如果使用战略,这种方法就轻巧,并且与Tailwind CSS[]合作得漂亮,并扩展其支持多个主题。

对于更复杂的CSS-in-JS设置(例如:风格化组件或情感),创建主题对象并通过React上下文或Vue 提供/插入来传递. Nx的库边框允许您在不重复的情况下在应用程序之间共享这个主题逻辑.

3. 通过道具和槽的组件变式

当设计差异超出颜色和间隔时——例如布局重排或附加元素——通过道具(反应)或插槽(Vue)组件变体[]的杠杆化是有效的。例如,组件可以接受]道具:

function Button({ variant, children }) {
 const className = variant === 'primary' ? styles.primary : styles.secondary;
 return <button className={className}>{children}</button>;
}

Nx 鼓励您将此类组件保存在一个共享的UI 库中。 当变体变得众多时, 请考虑使用 [[FLT: 0]] 变量注册 [[[FLT: 1] 模式: 在 JSON 对象中存储变体配置并将其映射到组件道具中。 这种方法是干净和可测试的 。

对于较大的差异,组合比条件更好。创建单独的子组件(例如,]),共享一个共同的基数。使用Nx的依赖图来确保共享基数库,并且只有在必要的时候才能更改。

4. 特性旗和运行时切换

对于需要切换服务器侧或用户子集的设计变体,将功能旗服务(如]LaunchDarkly[]或Unleash)与Nx整合是一个强效的解决方案。创建一个专门 库,将旗提供者进行摘要化。每个应用程序导入此库并检查旗以制作不同的设计 。

使用简单的反弹钩的示例 :

import { useFeatureFlag } from '@myorg/feature-flags';
function HomePage() {
 const newLayout = useFeatureFlag('new-layout');
 return newLayout ? <NewLayout /> : <OldLayout />;
}

Nx 的项目配置允许您在开发与测试时模拟旗帜。 您可以为不同的旗帜方案创建单独的 Nx 目标 :

"targets": {
 "serve-with-flags": { ... },
 "test-flags": { ... }
}

这让你的变异逻辑被隔离,容易切换而不重新部署整个应用程序.

有效管理设计变式

组织具有一致文件夹结构的变体

将变量相关文件分组, 保持工作空间的清理。 例如 :

libs/
 ui/
 button/
 src/
 lib/
 variants/
 primary/
 secondary/
 ghost/
 index.ts

每个变体文件夹都包含自己的样式、测试和故事。 这种方法只允许在变体上运行 。 Nx 的 tags (例如, , ) 允许您强制实施边界, 以便使用“ 主” 的应用程序不能意外依赖“ 鬼” 内部 。

调用 Nx 受影响的更改命令

当您修改一个变体时,您不会想要重建或测试每个应用。 Nx 的 , , , 自动检测哪些项目会根据依赖图受到影响。 这在具有许多设计变体的单列中特别强大,只有变体会改变其管道。

例如,如果您只更新“ 主” 按钮变体, Nx 将会为依赖于该变体的库和应用程序安排构建时间表, 从而让其他的变量不受影响。 这将节省大量 CI 时间 。

名称前后一致和文档差异

标准命名惯例,如、、或]、]],使变体具有可预测性。每个变体文件夹内使用[],解释目的、视觉差异以及何时使用每个变体。对于共享的设计符号,保留一个所有变体都参考的单一的真象源——如库。

自动进行变异测试

使用 Nx 的测试生成器为每个变体创建单位测试。 整合像 Chromatic 或 Percy 这样的视觉回归测试工具。 在您的 CI 管道中, 使用 [[FLT: 39] ] 运行只针对变体的视觉测试 。 配置 [[FLT: 0]] Lighthouse CI [[FLT: 1] 来比较变体的性能 。

例如,为变异测试添加一个单独的指标:

"test:variant": {
 "executor": "@nrwl/jest:jest",
 "options": {
 "jestConfig": "libs/ui/button/variants/primary/jest.config.ts"
 }
}

然后用贝壳脚本或Nx运行命令来协调,测试所有变体.

管理设计变式的最佳做法

  • 保存用于颜色、间距、排版的共享设计符号库[。可变性取代符号,而不是硬编码值。
  • 使用Nx的项目图可视化变体和app之间的依赖关系,避免循环依赖关系.
  • Version控制 您的变种配置。 如果您需要回滚一个特定的变种, 请使用 Git (例如 ) 标记 。
  • 文档变体生命周期 — 变体何时贬值?它保持活动多久?用Nx发电机自动清理(例如).
  • 保持核心业务代码的变体逻辑. 使用更高顺序的组件,混音器或装饰器来分离关注.
  • 选择正确的颗粒性[ – 并不是每一个小的样式变化都需要变体. 保留有实际意义的差分的变体(客户品牌,实验特征).

结论

设计变体是现代网络开发中的一个现实,Nx提供了管理它们的工具,而不牺牲构建速度或代码质量。无论选择构建时环境文件、运行时 CSS 自定义属性、组件道具或特征标志,关键是保持一致性并杠杆化 Nx 的单重能力- 受指令、 项目边界和依赖图。 通过采用这些方法和最佳做法,您可以创建适应不同受众和业务需求的可扩展、灵活的应用程序。为了进一步阅读,探索Nx 环境变量文档、 Tailwind CSS theming,以及 LaunchDarkly 特征标记。