129 - 《代码实时编辑的 N 种方案》

上午做了一些调研，目的是想给 Umi 加上实时编辑能力，让开发者在 Umi 官网即可实时编辑代码并看到结果。如果你想的官网、组件库、课程、Blog 等加上实时代码编辑功能？不妨试试以下方案。

1、最新出的 devjar 是最潮的，esm + import-maps + sucrase 实时编译，缺点是兼容性要求高且不支持 hmr。实现部分，用 es-module-shims 支持 import-maps；传入的代码模块转化成 Inline Modules；用 sucrase 实时编译代码，支持 jsx 和 typescript；用 es-module-lexer 提取 import 并替换路径为 cdn 上 esm 格式的地址，同时支持 externals。

// 第一步：import
import { useLiveCode } from 'devjar';

// 第二步：使用 useLiveCode 拿到 ref 和 load
const { ref, error, load } = useLiveCode({ getModulePath(m) { return `https://cdn.skypack.dev/${m}` } });

// 第三步：把 ref 传给 iframe
<iframe ref={ref} />

// 第四步：用 load 加载文件，index.js 是必须的
load({
 'index.js': `export default () => 'Hello world!'`,
});

2、react-runner 看名字就是和 react 耦合的，源码翻了下感觉平平无奇。用 sucrase 编译代码，然后通过 scope.import 声明依赖；依赖代码需要自己手动引入，如果要处理 import，还需要手动调 importCode 编译一次；通过 (new Function(…scopeKeys, code))(…scopeValues) 来执行代码，传入 req