在前端领域，我们经常需要在项目中使用大量的设计系统组件来完成各个页面的布局和样式。而 @design-systems/playroom 这个 npm 包则提供了一个非常方便的方式，让我们可以直接在预览窗口中实时查看和调试组件，并且还支持生成组件文档和样式变量文档。
安装和使用
首先，在项目中安装 @design-systems/playroom 包：
npm install @design-systems/playroom --save-dev
然后，创建一个 .playroom 目录作为组件库目录，并添加一个 components.js 文件，文件内容如下：
-- -------------------- ---- ------- -------------- - - -- ------- ----------- --------------------------------- -- -- -------- --- ----------- ------------------------------------ --------------- ---------------------- ------ ------------------- ------- ----------------- --
在 components.js 中，我们配置了 Playroom 导出所有 src/components 文件夹下的大写字母开头的组件，而其他配置项分别为：
outputPath指定组件文档的输出路径frameComponent指定渲染组件的外框架组件路径scope指定组件的作用域，即组件内部样式的作用范围themes指定存放各种主题样式的文件路径
接着，创建一个 FrameComponent.js 文件，该文件用于渲染组件：
import React from 'react';
export default function FrameComponent({ children }) {
return <>{children}</>;
}最后，运行以下命令：
npx playroom
然后，访问 http://localhost:9000 即可进入 Playroom 的预览窗口了。
示例代码
我们现在假设有一个 Button.js 组件，组件的代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - ----- -- -
----- - --------- ------- - - ------
------ -
------- ----------
----------
---------
-
-
------ ------- -------我们可以在 Playroom 的窗口中像下面这样给 Button 组件添加样式：
.Button {
color: red;
background-color: blue;
border-radius: 5px;
}然后，编写测试代码，测试 Button 组件的基本用法和 props：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- -------------------------
------ ------ ---- ---------------------------
------------------ -- -- -
------------- -- -- -
----- - ----------- - - -------------------- -------------
------------------------- --------------------------
---
----------- ------- -- -- -
----- - ----------- - - -------------- ------------------------- ----
-------------------------------------------------------
---
---结论
@design-systems/playroom 是一个非常实用的 npm 包，它可以帮助我们快速进行组件开发和测试，并且还能自动生成组件文档和样式变量文档，非常方便。但是，在使用过程中也需要注意一些细节，比如熟悉所有的配置项和插件等。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f4058fbdbf7be33b25671ea