以前用过CodeSandbox，不过一直在学习，而且都是在本地运行，只是偶尔用来展示代码。最近在研究CodeSandbox的Node容器，简直太强大了。相当于一个可以运行Node.js的在线虚拟机。项目，我还没有看到其他具有此功能的在线编辑器。另外，在CodeSandbox上可以获得接近于本地编辑器的体验，直接将vscode的主题和设置导入CodeSandbox。体验真的很好。还有一些黑科技，比如用Node容器编译一些本地不好编译的东西，速度谁知道。CodeSandbox官网CodeSandboxGitHub可以了解到StackBlitz，这是另一个提供类似体验的在线编辑器。同样是基于vscode，优点是国内速度会稍微快一些，但是暂时不支持node容器或者自定义webpack项目。下面将使用CodeSandbox过程中遇到的一些问题和解决方法记录下来，供有需要的同学参考。CodeSandbox在国内访问慢主要是因为一个Google字体的api卡住了。解决办法是用下面这个插件，把谷歌字体的api换成国内分别提供Chrome和Fifox的插件。ReplaceGoogleCDNGitHub但是即使你更换了谷歌字体，第一次加载也需要很长时间是的，我尝试创建一个默认的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/XY少康/react-development-environment/tree/basic-react-support-codesandbox或者直接点击链接从GitHub导入项目，CodeSandbox会根据仓库中的文件推断出属于什么项目，然后创建对应的模板，稍后可以在沙箱中使用。在config.json中修改。CodeSandbox的模板类别分为三类：客户端服务器预设。同一类别的模板可以相互切换，不同类别的模板不能切换。比如basic-react这个仓库导入到CodeSandbox中，会被识别为React，所以Template设置为React。如果我想切换到Node模板，它是行不通的。这时候我可以在仓库中添加sandbox.config.json文件，预先配置Template类型来解决。模板分类ClientAngularCxJSDojoPreactReactReasonStaticSvelteVanillaVueServerApolloEmberGatsbyNestNext.jsNodeNuxt.jsSapperStyleguidistPresetsReact+TSVanilla+TSCodeSandbox也支持多种导入方式，具体可以参考文档ImportingSandboxesCustomizedforCodeSandbox，out-of-the-box模板为最终结果预览CodeSandbox地址GitHub仓库基础模板basic-reactGitHubReact基础环境配置详细说明配置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,disableeHostCheck:true,//mustpublic:'0.0.0.0:0',//must}...}必须配置disableHostCheck和public，否则HMR无法正确访问Nginx代理webpack-dev-server/issues/后面的服务器1240还针对CodeSandbox优化了Webpack的启动配置。不开源映射，留HMR看更多阅读AnnouncingCodeSandboxContainers中文版CodeSandbox启动容器，演化为WebIDEWhat'sUniqueAboutCodeSandboxAnnouncingCodeSandboxv3
