首发于公众号 code进化论，欢迎关注。
什么是Playground？
Playground 是一个轻量化、可交互的环境，用于快速验证、迭代和展示功能。比如 TypeScript Playground 就是一个典型的例子，开发者可以在线编写 TypeScript 代码并实时查看编译结果，并支持切换 TypeScript 版本及时体验最新特性。还有更多例子比如 lexical 文本编辑器。
Playground 能做什么？
在前端开发中，Playground 的必要性体现在多个方面，它贯穿了需求沟通、技术验证、用户反馈以及开发提效的各个环节。
需求沟通
Playground 是连接开发者、设计师、产品经理等多方沟通的工具，能够将产品需求以交互式代码形式展示出来，让所有参与者能直观感受到功能效果，尤其是在一些偏技术导向功能。
技术验证
对于开发者而言，Playground 是进行技术可行性分析和测试的重要工具，开发无需在正式项目中进行技术验证和效果测试，尤其是对于一些大型项目，编译速度会大大降低开发者的开发效率。
降低开发者学习曲线
Playground 通常提供内置示例和友好的交互界面，帮助开发者快速理解工具使用并进行功能验证。
如何借助 Nx 搭建 Playground
项目案例
案例一
这是文本编辑器案例，用户可以通过快捷指令快速引用一些节点中内置的参数，下面是我们最终实现的 playground 效果：
案例二
这是一个工作流的案例，用户可以通过提供的节点和线快速搭建一个工作流应用，节点和节点之间、节点本身、节点和线之间都存在大量复杂的校验逻辑，同时每个节点的UI展示也非常多样化，下面是我们最终实现的 playground 效果：
小结
这两种功能就是一个典型的技术导向案例，开发者在 playground 中提供了很多内置的示例以及交互，前端完全可以脱离后端进行独立开发。
下面会通过这个案例来演示如何借助 Nx 快速搭建 playground，在此之前需要先了解 playground 的组成部分，playground 主要由两部分组成，一个是功能的核心库，核心库提供了功能的核心逻辑，会对外暴露 api 或者组件，在应用层直接使者这些 api 或者组件就能实现功能。另一个则是 playground 的主体，通过集成功能核心库来展示最终的效果，并提供相应的示例供开发者预览。
搭建功能核心库
搭建功能核心库的步骤和前面讲过的一样，通过 Nx Console 的可视化界面创建一个 react library：（Generate UI ⇒ @nx/react - library）
这里我们创建了一个叫 lexical-editor 的库。
搭建Playground
搭建 Playground 其实就是创建一个独立应用程序，过 Nx Console 的可视化界面创建一个 react application：（Generate UI ⇒ @nx/react - application）
主要的设置包括：
- 应用名称（lexical-editor-playground）
- 构建工具（vite），playground 可以不用上 webpack，vite 完全够用，也能提供好的开发体验。
- 编译工具可以选 babel
之后可以运行 server 命令启动项目：
开发完后运行 build 获取构建产物并进行部署：
总结
本章主要介绍了如何借助 playground 来提高代码开发效率，针对一些典型的技术导向案例，开发者通过在 playground 中提供内置的示例以及交互，前端完全可以脱离后端进行独立开发。同时能够将产品需求以交互式代码形式展示出来，让非技术人员（pm、ue、ui）直观感受到功能效果并进行优化。