在前端开发中，经常需要对代码进行版本管理和比较。而有了 storybook，可以方便地在一个页面上查看多个组件的不同版本。而这里要介绍的 npm 包 storybook-addon-versions 则可以将不同版本的组件进行比较，方便定位问题并进行版本回退。
安装
在项目中安装 storybook-addon-versions：
npm install -D storybook-addon-versions
配置
在 .storybook/main.js 中引入 storybook-addon-versions，并添加到 addons 数组中：
-- -------------------- ---- -------
----- - ------- - - ---------------------------
----- ---- - ----------------
-------------- - -
-------- ---------------------------
------- -
-------------------------
------------------------------
------------------------------------
--在 .storybook/preview.js 中，添加如下代码：
import { withVersions } from '@storybook/addon-versions';
addDecorator(withVersions);使用
在组件的 .stories.js 文件中，可以添加 withVersions 配置：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------------------
------ ----------- ---- ----------------
------ ------- -
------ --------------
---------- ------------
----------- ---------------
----------- -
-- --- ----- ------------- --- --
--------- -
-
----- ---------
-- --- --------- ----- --- --
-------- -
----------- ------
--
--
-
----- ---------
-- --- --------- ----- --- --
-------- -
----------- ------
--
--
--
--
--
------ ----- ------- - -- -- ------------ ---在配置 parameters.versions 时，可以添加多个版本的操作配置，用于比较和回退。其中 name 为版本号，可以自定义。options 为在组件 Knobs 中的配置项。
同时，可以在 Storybook 工具栏中，查看到组件版本的控制按钮：
点击“版本”按钮后，会展示版本比较的界面：
此时，可以选择不同版本进行比较，同步切换组件 Knobs 的配置。
总结
storybook-addon-versions 可以方便地管理组件的版本，为解决团队协作中的版本管理问题提供了一种解决方案。同时，通过定期比较和回退版本，也可以及时发现和解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560ce81e8991b448df120