web IDE(codeSandBox)部分模块的简单实现

bitSandBox

live demo: https://f-one-1.github.io/bitSandBox/

demo项目，用于学习实践, codeSandBox 之类的web IDE的部分模块的简单实现

已实现模块

• 在线编辑组件 (highlight-code)
• 加载依赖
  • 允许动态加载 cdn 依赖，通过添加script标签的方式
• 转译模块
  • (css,json,jsx) 分别进行编译处理
  • 构建模块依赖关系图，以便 require 源代码模块引入
• 执行代码
  • 构造CommonJS 环境，必备三套件，实现自定义模块 require ，module，exports
  • 找到入口文件执行
• 动态加载依赖
  • 预期实现思路：动态导入script标签，通过cdn引入依赖
  • 可能存在的问题：( (⊙﹏⊙)，问题蛮多的)
    • 离线模式
    • 性能问题
  • 潜在的最优解决方案
    • stackblitz
    • 一个WASM 编写的的WebContainers，允许您创建全栈 Node.js 环境。
    • 加载了 VS Code 强大的编辑体验、完整的终端、npm 等。它也完全在您的浏览器中运行，
    • 比您的本地环境更快。构建完成速度比 yarn/npm 快 20%，包安装完成速度 >= 5 倍。
    • Node.js 在浏览器中调试。与 Chrome DevTools 的无缝集成支持本地后端调试，无需安装或扩展。
    • 默认安全。所有代码执行都发生在浏览器的安全沙箱内，而不是远程虚拟机或本地二进制文件上。
    • WebContainers 包括一个映射到浏览器的 ServiceWorker API 的虚拟化 TCP 网络堆栈，使您能够按需即时创建实时 Node.js 服务器，即使您离线也能继续工作。
    • stackblitz 作者未来的展望
      • 无需在硬盘上安装节点、npm、git、VS Code 或其他任何东西。您只需要一个网络浏览器

未实现模块

• 模块热更新

  • 预期实现思路：
  • 引入 react-refresh-runtime, react-refresh-babel
  • 收集代码已改变的模块列表，并重新执行该代码模块，即可达到热更新的效果。
  • 模块互相引用的热更新

• vue，react项目初始化

  • 以固定模板初始化vue,react项目
  • 可能存在的问题：
    • 代码初始化固定模板的限制
    • 无法分析依赖，目前使用纯前端+script_CDN方案 (┭┮﹏┭┮，手动添加，重回蒸汽时代)
  • 潜在的最有解
    • git模块获取项目
    • codeSandBox 基于后端分析项目依赖，前端进行缓存以及加载(Node.js 无法在浏览器运行，成本过高)
    • stackblitz WASM 编写的的WebContainers，允许您创建全栈 Node.js 环境 (不懂)

---