Codesandbox

这期来关注一下CodeSandbox, 这是一个浏览器端的沙盒运行环境，支持多种流行的构建模板，例如 create-react-app、 vue-cli、parcel等等。 可以用于快速原型开发、DEMO 展示、Bug 还原等等. 相似的产品有很多，例如codepen、JSFiddle、WebpackBin(已废弃). CodeSandbox 则更加强大，可以视作是浏览器端的 Webpack 运行环境, 甚至在 V3 版本已经支持 VsCode 模式，支持 Vscode 的插件和 Vim 模式、还有主题. 另外 CodeSandbox 支持离线运行(PWA)。基本上可以接近本地 VSCode 的编程体验. 有 iPad 的同学，也可以尝试基于它来进行开发。所以快速的原型开发我一般会直接使用 CodeSandbox 目录 引基本目录结构项目构建过程 Packager WebpackDllPlugin在线打包服务回退方案Transpilation 基本对象ManagerTranspiledModuleTranspilerBabelTranspilerEvaluation技术地图扩展引 笔者对 CodeSandbox 的第一印象是这玩意是运行在服务器的吧？ 比如 create-react-app 要运行起来需要 node 环境，需要通过 npm 安装一大堆依赖，然后通过 Webpack 进行打包，最后运行一个开发服务器才能在浏览器跑起来. 实际上 CodeSandbox 打包和运行并不依赖于服务器, 它是完全在浏览器进行的. 大概的结构如下: Editor: 编辑器。主要用于修改文件，CodeSandbox这里集成了 VsCode, 文件变动后会通知 Sandbox 进行转译. 计划会有文章专门介绍CodeSandbox的编辑器实现Sandbox: 代码运行器。Sandbox 在一个单独的 iframe 中运行, 负责代码的转译(Transpiler)和运行(Evalation). 如最上面的图，左边是Editor，右边是SandboxPackager 包管理器。类似于yarn和npm，负责拉取和缓存 npm 依赖CodeSandbox 的作者 Ives van Hoorne 也尝试过将 Webpack 移植到浏览器上运行，因为现在几乎所有的 CLI 都是使用 Webpack 进行构建的，如果能将 Webpack 移植到浏览器上, 可以利用 Webpack 强大的生态系统和转译机制(loader/plugin)，低成本兼容各种 CLI. ...

在 CodeSandbox 开发基于 Webpack 的项目之前有用过 CodeSandbox,不过一直在学习,都是在本地运行,只是偶尔用来展示下代码用,最近研究了下 CodeSandbox 的 Node 容器,简直太强大了,相当于一个在线虚拟机,能运行 Node 的项目,暂时还没见到别的在线编辑器有这种功能的.另外在 CodeSandbox 上能获得接近本地编辑器的体验,直接把 vscode 的主题和设置导入到 CodeSandbox,体验真心不错.还有一些黑科技,比如用 Node 容器编译一些在本地不太好编译的东西,那速度谁用谁知道.CodeSandbox 官网CodeSandbox GitHub可以了解下 StackBlitz另外一个提供类似体验的在线编辑器,也是基于 vscode,优点是国内速度会稍微快些,只是暂时还不支持 node 容器或者自定义 webpack 的项目.下面记录了使用 CodeSandbox 过程中的一些问题,和解决方法,以供有需要的同学参考.CodeSandbox 国内访问慢主要是有个谷歌字体的 api 一直卡着解决办法,使用下面的插件,替换谷歌字体的 api 替换为国内的有分别提供 Chrome 和 Firfox 的插件.ReplaceGoogleCDN GitHub不过就算替换了谷歌字体,第一次加载也需要挺久的,尝试创建了一个默认的 React 模板,加载要 40s+,根据网络波动有差异.后面使用缓存配合 HMR 算勉强能用吧.如果使用 node 容器,还会更慢,所以推荐如果要用 CodeSandbox 的话搭配科学上网食用会更香.从 GitHub 直接导入到 CodeSandboxCodeSandbox 支持直接从 GitHub 导入项目,用法是使用codesandbox.io/s/github/后面跟上项目地址中github.com/之后的所有内容,支持分支.比如我的项目地址是https://github.com/XYShaoKang/react-development-environment/tree/basic-react-support-codesandbox那么要从这个仓库直接导入到 CodeSandbox,可以直接在浏览器中输入codesandbox.io/s/github/XYShaoKang/react-development-environment/tree/basic-react-support-codesandbox或者直接点击链接从 GitHub 导入的项目,CodeSandbox 会根据仓库中的文件来推断是属于什么项目,然后创建对应的模板,可以之后在sandbox.config.json中修改.CodeSandbox 的模板大类分为 client server presets 三类,同样大类的模板可相互切换,而不能切换到不同大类的模板.比如basic-react这个仓库,如果导入到 CodeSandbox 后,会被识别为 React,从而把 Template 设置为 React,如果我想切换为 Node 模板就不行,这个时候可以通过在仓库中添加sandbox.config.json文件,预先配置好 Template 类型来解决.模板分类ClientAngular CxJS Dojo Preact React Reason Static Svelte Vanilla VueServerApollo Ember Gatsby Nest Next.js Node Nuxt.js Sapper StyleguidistPresetsReact+TS Vanilla+TSCodeSandbox 还支持其他多种方式导入,详情参考文档Importing Sandboxes针对 CodeSandbox 定制,开箱即用的模板最终结果预览CodeSandbox 地址GitHub 仓库基础模板basic-react GitHubReact 基础环境配置 详细说明配置 sandbox.config.json将 sanbox 模板设置为 node,指定容器内部的端口,需要跟 DevServer 监听的端口一致{ “template”: “node”, “container”: { “port”: 8080 }}配置 webpack.config.js{ … devServer: { host: ‘0.0.0.0’, port: 8080, // 指定 devServer 启动的端口 hot: true, inline: true, disableHostCheck: true, // 必须 public: ‘0.0.0.0:0’, // 必须 } …}必须要配置 disableHostCheck 和 public,否则 HMR 不能正确访问到 Nginx 代理后面的服务器webpack-dev-server/issues/1240另外针对 CodeSandbox 优化了下 Webpack 的启动配置.不开启源映射,保留 HMR更多阅读Announcing CodeSandbox Containers中文版 CodeSandbox 推出容器，进化为 WebIDEWhat’s Unique About CodeSandboxAnnouncing CodeSandbox v3 ...