做了一个类似 Codepen 的小作品： RunJS，欢迎拍砖

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 886 天前的主题，其中的信息可能已经有所发展或是发生改变。

RunJS 大量组件的开发，借用了该工具本身。

比如，左右拖动的效果，使用了示例（ React resizer Example - using mouse event ）( https://runjs.qingting.work/#/projects/9f479722572a4680)。
左侧的 HTML/CSS/Javascript 编辑器，使用了 CodeMirror 。在将 CodeMirror 整合到项目之前，可以在 RunJS 本身做一些调试：
测试 Codemirror 对 html 代码的 fold 效果 - CodeMirror Html folding （ https://runjs.qingting.work/#/projects/11885544ef0a496b ）
测试 Codemirror 实现代码自动填充的功能 - CodeMirror any word hint （ https://runjs.qingting.work/#/projects/d0e6fe2e53754295 ）
测试 Codemirror 实现代码格式化 - Javascript formatter using Prettier standalone api （ https://runjs.qingting.work/#/projects/80f29502efb54d5c ）
测试 CSS 语法检查功能- CSS syntax validator (by CSSTree) （ https://runjs.qingting.work/#/projects/42cff0cbc5744fa2 ）

5 条回复 • 2022-06-27 17:08:40 +08:00

dagger8224

2022-06-26 18:35:43 +08:00

赞，具有自举性说明是一个实用的开发工具

fredjacson

2022-06-27 13:12:34 +08:00 via iPhone

运行是咋做的，比如我在线引入 react 相关的包

liushuigs

2022-06-27 14:50:55 +08:00

@fredjacson 写 React ，可以引用这个模板： https://runjs.qingting.work/#/projects/032c106a333c4b30
模板我还没整理出来。运行都是引入第三方 UMD 包，不支持 import

fredjacson

2022-06-27 15:39:27 +08:00 via iPhone

@liushuigs codesandbox.io 好像支持 import 楼主可以试试这种方案

liushuigs

2022-06-27 17:08:40 +08:00

@fredjacson Codesandbox 有整套容器技术来支持，比较重，和 RunJS/Codepen 的定位不一样。目前还没实力做那么复杂的 Online editor 。据我了解，国内一些公司内部有类似实现，以及这个站点用了类 codesandbox 的技术 /方案： http://www.mipcode.com