codesandbox-client是codesandbox的浏览器端代码仓库，本系列文章尝试从项目目录结构、实现机制、搭建属于自己的CodeSandbox等几个层面来做分析。这是第一篇，本地调试初体验篇。

除了一些独立抽取出来的模块及各种辅助（如：浏览器插件、各种组件、SVG图标等）主要的实现在packages/app目录下。

packages/app目录下有几个关键的文件夹：

  1. -config  打包构建相关配置
  2. -public  图标静态资源
  3. -scripts 工程构建执行脚本
  4. -static  字体、图片、js等的静态资源
  5. -src     核心代码实现
  6.     -app   外部页面，主管代码编辑器及与iframe通信
  7.   -embed 暂时还不知道这个页面是嵌在哪里的
  8.   -sandbox 实时预览的iframe部分
  9.   -watermark-button 水印

通过上面的目录结构，我们可以大概猜测到其实现的核心模式就是，app页面侧主管代码编辑器及与iframe通信，代码的来源从这个页面产出，并负责跟iframe页面通过postMessage来进行通信；而iframe页面（sandbox）则在接收到所有的代码后通过一套浏览器端的打包构建编译系统来完成代码的编译及渲染。

p.s. 经过评论区同学的信息补充，我们从如何贡献代码的文档中了解到了codesandbox-client的代码组织结构，CodeSandbox端上的仓库代码分为了5个部分，并使用lerna在这5各部分中共享依赖项。这5部分分别是：

  • app：编辑器，搜索，形象页，内嵌的iframe以及执行沙箱；
  • homepage：首页；
  • common：所有这5个包的公共部分，可复用的js都放在这里；
  • codesandbox-api：负责沙箱跟编辑器之间通信的npm包；
  • codesandbox-browserfs：浏览器中的文件系统，模仿了Node.js的文件系统API，支持从不同的后端存储和检索文件。fork自https://github.com/jvilk/BrowserFS，并添加了CodeSandbox自己的后台系统。

本地启动应用

还是按照CONTRIBUTING文档的说明，我们按照下面的几个步骤来本地启动下应用，以方便我们做调试。

为了防止在CodeSandbox主应用上面做代码修改，以及方便后续可能做PR来贡献代码，我们先fork一份代码出来，如我的：CodeSandbox，然后克隆到本地：

  1. $ git clone https://github.com/abell123456/codesandbox-client && cd codesandbox-client

然后安装依赖：

  1. $ yarn install

这里有几个注意点：

  • 如果你本地的Node.js版本不是10.x，则需要切换到10.x版本，切换的时候建议直接下载Node.js安装包来切换，10.x的下载包可以在这里找到，按照你电脑的操作系统按需下载；
  • 作者之前使用Node.js的版本管理工具包n来做切换，结果导致后面的操作各种出问题，或者使用CodeSandbox作者推荐的fnm工具来切换；

依赖安装完成后，就可以启动服务了，本地调试有三种服务可以来使用：

  • yarn start: 依赖的 codesandbox-api 以及 codesandbox-browserfs 两个模块的构建，以及启动app的开发环境，服务启动起来后可以访问：http://localhost:3000/s/new
  • 在后面的运行中，您还可以绕过依赖关系的构建，这样构建速度会快很多，使用 yarn start:fast 命令即可；
  • 如果你想查看首页的效果，执行：yarn start:home，然后访问 http://localhost:8000/ 即可。

启动起来后的效果如下：
image.png

既然我们的代码是从CodeSandbox主应用上fork出来的，那么我们怎么保证我们fork出来的代码跟主应用的master分支代码保持同步最新呢？只需要执行下面命令即可：

  1. $ git remote add upstream https://github.com/codesandbox/codesandbox-client.git
  2. $ git fetch upstream
  3. $ git branch --set-upstream-to=upstream/master master

这会增加原始的仓库为一个名叫“upstream”的“remote”，然后从这个远程拉取拉取git信息，然后无论你何时执行git pull都会设置你的本地仓库的master分支来使用远程upstream的master分支。这样你就可以全部基于这个master分支来提PR。后面只要你想更新你master分支的版本，只要执行常规的git pull即可。

另外，如果你想查看app的状态，可以安装Cerebral Debugger然后连接到它的8383端口即可。然后你刷新app，你应该就能看到状态值以及执行的序列等等信息。具体可以查看使用手册。