开源Web IDE项目 codesandbox 源码解读（2）——项目结构

前言

codesandbox是一个优秀的Web IDE大型开源项目。其中IDE部分使用react+vscode构建，使用了大量的开源模块，代码结构清晰，逻辑严谨。我在学习codesandbox的源码时，开发者们正在将状态管理从mobx + mobx-state-tree + cerebral一整套转移到overmind上。我在阅读这份源码的过程中收获了很多知识技巧，不论从代码的整体结构，还是一些实用模块的使用，还有大型项目的规范构建以及javascript和react的写法上都受益良多。所以我准备用一个系列的文章来简要解读codesandbox的源码，总结一下经验技巧。

项目结构解读

codesandbox（以下简称csb）项目由下面几个服务组成，其中client部分开源在github

• Client: the web application
• Server: the Phoenix API server
• Nginx: Nginx config files
• Git Extractor: responsible for extracting the source from a GitHub repository
• CLI: the CLI to upload a CodeSandbox project from your command line

使用 git clone https://github.com/codesandbox/codesandbox-client 命令即可将client部分源码克隆到本地
打开项目根目录, 可以看到许多配置文件和目录, 下面逐一解释一下.

• .circleci/config.yml
  这是circleci(一个可以将git代码持续集成, 编译, 测试并部署的平台)的配置文件, 主要用于自动化的构建, 测试, 部署流程, 将繁琐的人工操作交由云端自动完成, 降低出错的可能.

• .github
  github提交issue的模板配置

• .vscode
  vscode的配置文件, 告诉vscode为typescript和javascript开启eslint和autofix的功能

• contributor-docs/adding-template.md
  告诉大家如何为csb添加额外的框架模板(之后还会遇到这个问题, 到时候再细说)

• docker
  包含了自动打包成docker的流程, 包括了 integrations, prod, test三种情况的docker构建流程.

• node_modules
  存放npm模块的目录

• packages
  源码所在的文件夹. csb使用lerna+yarn workspace的方式进行monorepo的包管理, 非常方便.. 之后会对packages里的源码进行重点解读

• standalone-packages
  其中放了一些经过csb修改过的开源模块, 包括browserfs, monaco-editor, vscode等

• .all-contributorsrc
  all-contributors-cli 的源文件, 用来在readme里生成酷炫的contributors表格, 效果如图
  

  image.png

• .dockerignore
  文件里只有两行内容, 用来告诉docker忽略哪些文件

*
!www

第一行的*让docker忽略全部文件, 第二个!www又让docker只把build生成的www目录包含进来, 很巧妙.

• .drone.yml
  配合docker使用的自动部署工具drone的配置文件

• ,editorconfig
  代码编辑器的通用配置文件, vscode需要安装 EditorConfig for VS Code 插件使用该配置

• .eslintignore
  告诉eslint该忽略对哪些文件的检查

• .eslintrc
  自定义eslint的规则

• .flowconfig
  js静态类型检查器的配置文件

• .gitattributes
  git属性配置, 其中 * text=auto eol=lf 让git push代码时统一以lf结尾

• .gitignore
  告诉git忽略哪些文件和目录

• .huskyrc
  npm模块husky的配置文件, 使得每次commit之前代码都会被prettier修复一遍

• .nvmrc
  告诉nvm应该使用nodejs v10.16.2

• .prettierignore
  告诉prettier应该忽略哪些文件及目录

• .prettierrc
  prettier的规则配置

• .sentryclirc
  sentry是一个前端监控的工具, 具体用法我还没有研究过, 后面补上

• .yarnclean
  去掉依赖包中不需要的内容
  去掉 @types/react-native 尤为重要, 保留它会导致app在build过程中出现重复声明导致报错

• .yarnrc
  空, 暂无作用

• babel.config.js
  babel的配置文件

• CODE_OF_CONDUCT.md
  开源宣言

• CONTRIBUTING.md
  简要解释了一下代码结构和开发环境的配置以及contribute的方法

• Dockerfile
  又一个构建docker所用的配置文件(暂时还不了解用途)

• generate-test-screenshots.sh
  生成测试时的截图?关注一下 packages/app/integration-tests/tests/generate-sandboxes.js(暂时还不了解用途)

• Gulpfile.js
  编译vscode所用的gulp配置(暂时还不了解用途)

• lerna-debug.log
  在lerna运行时会生成log

• lerna.json
  lerna的配置文件, 告诉lerna把哪些目录加入包管理当中

• LICENSE
  GNU General Public License. LICENSE说明

• now.json
  暂时未知用途

• package.json
  node的项目配置(之后细说)

• README.md
  项目介绍

• sandbox-performance-benchmark.js
  puppeteer的速度测试

• yarn.lock
  使用yarn进行包管理, 锁住一些包防止依赖冲突

总结

不愧是一个优秀的大型开源项目, 150+数量的开发者,四年的开发时间, 光根目录的配置文件就有几十个, 每个工具的使用都可以单独写一篇文章出来, 从头开始学习的话还是要费一番工夫的