V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
liushuigs
V2EX  ›  分享创造

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

  •  
  •   liushuigs · 2022-06-24 13:39:24 +08:00 · 2053 次点击
    这是一个创建于 908 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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
        1
    dagger8224  
       2022-06-26 18:35:43 +08:00
    赞,具有自举性说明是一个实用的开发工具
    fredjacson
        2
    fredjacson  
       2022-06-27 13:12:34 +08:00 via iPhone
    运行是咋做的,比如我在线引入 react 相关的包
    liushuigs
        3
    liushuigs  
    OP
       2022-06-27 14:50:55 +08:00
    @fredjacson 写 React ,可以引用这个模板: https://runjs.qingting.work/#/projects/032c106a333c4b30
    模板我还没整理出来。运行都是引入第三方 UMD 包,不支持 import
    fredjacson
        4
    fredjacson  
       2022-06-27 15:39:27 +08:00 via iPhone
    @liushuigs codesandbox.io 好像支持 import 楼主可以试试这种方案
    liushuigs
        5
    liushuigs  
    OP
       2022-06-27 17:08:40 +08:00
    @fredjacson Codesandbox 有整套容器技术来支持,比较重,和 RunJS/Codepen 的定位不一样。目前还没实力做那么复杂的 Online editor 。据我了解,国内一些公司内部有类似实现,以及这个站点用了类 codesandbox 的技术 /方案: http://www.mipcode.com
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5296 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 05:46 · PVG 13:46 · LAX 21:46 · JFK 00:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.