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

爱意满满的作品展示区。

This topic created in 1444 days ago, the information mentioned may be changed or developed.

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 replies • 2022-06-27 17:08:40 +08:00

dagger8224

Jun 26, 2022

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

fredjacson

Jun 27, 2022 via iPhone

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

liushuigs

Jun 27, 2022

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

fredjacson

Jun 27, 2022 via iPhone

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

liushuigs

Jun 27, 2022

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