React Playground 实现原理揭秘

大家应该都用过在线写代码的工具，比如 vue 的 playground：左边写代码，右边实时预览。右边还可以看到编译后的代码：这是一个纯前端项目。类似的，也有 React Playground。那它是怎么实现的呢？我们自己能实现一个么？可以的，今天我们来分析下实现思路。首先是编译：编译用的 @babel/standalone，这个是 babel 的浏览器版本。可以用它实时把 tsx 代码编译为 js。试一下：npx create-vite进入项目安装 @babel/standalone 和它的 ts 类型：npm installnpm i --save @babel/standalonenpm i --save-dev @types/babel__standalone去掉 index.css 和 StrictMode：改下 App.tsximport { useRef, useState } from 'react'import { transform } from '@babel/standalone';function App() {  const textareaRef = useRef(null);  function onClick() {    if(!textareaRef.current) {      return ;    }    const res = transform(textareaRef.current.va ………………………………