我们从 0 到 1 实现了和 vue playground 功能一样的项目：

整体测试一下 react playground 的功能：

我们用 create-vite 创建的项目，进入项目，把开发服务跑起来：

npm run dev

浏览器访问下：

我们可以在左侧编辑器写组件和样式，然后在右边实时预览：

css 和 ts 代码都有提示：

并且我们后面引入的 npm 包也会有类型提示：

但额外引入的 npm 包不能直接用：

需要在 import-map.json 里配置下才行：

文件可以新增、删除、修改：

比如我们新增一个 Aaa.tsx 组件

还有它的样式 Aaa.css

在 App.tsx 里引入后就可以使用：

你可以直接打开这个 url 试试

这个通过 url 分享代码也是 playgrond 的功能。

点击右上角的分享按钮可以复制分享链接：

此外，还可以下载代码到本地：

还有切换亮色、暗色主题：

这些就是 React Playground 的全部功能。

最终实现的效果还不错。

回顾下我们的开发过程：

我们首先写了下布局：

用 allotment 实现的 split-pane，两边可以通过拖动改变大小。

然后集成 @monaco-editor/react 实现的编辑器。

还用 @typescript/ata 包实现了代码改变时自动下载 dts 类型包的功能。

这样，在编辑器里写代码就有 ts 类型提示了。

然后我们实现了多文件的切换：

在 Context 中保存全局数据，比如 files、selectedFileName，还有对应的增删改的方法。

对 Context.Provider 封装了一层来注入初始化数据和方法，提供了 initFiles 的信息。

然后在 FileNameList 里读取 context 里的 files 来渲染文件列表。

点击 tab 的时候切换 selectedFileName，从而切换编辑器的内容。

然后实现了编译以及在 iframe 里预览。

使用 @babel/standalone 做的 tsx 代码的编译，编译过程中需要对 .tsx、.css、.json 等模块的 import 做处理，变成 blob url 的方式。

通过 babel 插件实现了对 import 语句的修改：

css 模块包一层代码加到 head 的 style 标签里，json 包一层代码直接 export，而 tsx 模块直接 babel 编译即可。

对于 react、react-dom/client 这种，用浏览器的 import maps 来引入。

然后通过 iframe 实现了预览：

替换 html 模版里 import maps 和 src 部分的 script 标签后，同样用 blob url 设置为 iframe 的 src 就可以了。

这样就可以预览了：

iframe 的代码如下：

正是替换了 importmap 和 src 部分的 html，并且 css 也被添加到了 head 里的 style 标签下。

然后我们实现了文件的新增、删除、修改：

main.tsx、App.tsx、import-map.json 设置为 readonly，不可编辑和删除。

之后实现了错误的显示，在 iframe 里监听 error 事件，发生错误的时候通过 postMessage 传递给父窗口。

父窗口里监听 message 事件传过来的错误，用 Message 组件显示。

然后实现了主题切换：

主题切换就是在根元素加一个 .light、.dark 的 className，里面声明 css 变量，因为 css 变量可以在子元素里生效，子元素写样式基于这些变量，那切换了 className 也就切换了这些变量的值，从而实现主题切换。

之后实现了通过链接分享代码的功能：

原理就是把 files 信息 JSON.stringify 之后保存到 location.hash。

然后初始化的时候从 location.hash 读取出来 JSON.parse 之后设置到 files。

这个过程中还要做下压缩，用 fflate 这个包来对字符串进行压缩，然后用 btoa 转为 asc 码字符串。

代码下载则是基于 jszip 和 file saver 包实现的。

这样，playground 里写的代码内容就可以通过 url 分享出去，并且可以下载了。

之后做了下性能优化：

用 Performance 分析了页面的 Event Loop，发现有 long task，性能优化的目标就是消除 long task。

分析发现是 babel 编译的逻辑导致的。

我们通过 Web Worker 把 babel 编译的逻辑放到了 worker 线程跑，通过 message 事件和 postMessage 和主线程通信。

拆分后功能正常，再用 Performance 分析，发现耗时逻辑被转移到了 worker 线程，主线程这个 long task 没有了。

这就是我们开发这个 playground 的全过程。

其实这个项目完全可以写到简历里，而且非常好讲故事，比如你开发的组件库，用这个 playground 来实现组件的在线预览。

而且这个项目有挺多技术亮点的：

• 用 @monaco-editor/react 实现了网页版 typescript 编辑器，并且实现了自动类型导入
• 通过 @babel/standalone 实现了文件编译，并且写了一个 babel 插件实现了 import 的 source 的修改
• 通过 blob url 来内联引入其他模块的代码，通过 import maps 来引入 react、react-dom 等第三方包的代码
• 通过 iframe 实现了预览功能，并且通过 postMessage 和父窗口通信来显示代码运行时的错误
• 基于 css 变量 + context 实现了主题切换功能
• 通过 fflate + btoa 实现了文件内容的编码、解码，可以通过链接分享代码
• 通过 Performance 分析性能问题，并通过 Web Worker 拆分编译逻辑到 worker 线程来进行性能优化，消除了 long lask

而且这些技术点也挺有价值的，通过 playground 项目对这些技术点有很好的掌握之后，在别的地方也能用到。

总之，大家可以把这个项目消化吸收，内化成你自己的东西。