前言
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运行时会生成loglerna.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+数量的开发者,四年的开发时间, 光根目录的配置文件就有几十个, 每个工具的使用都可以单独写一篇文章出来, 从头开始学习的话还是要费一番工夫的
