在 CodeSandbox 开发基于 Webpack 的项目

之前有用过 CodeSandbox,不过一直在学习,都是在本地运行,只是偶尔用来展示下代码用,最近研究了下 CodeSandbox 的 Node 容器,简直太强大了,相当于一个在线虚拟机,能运行 Node 的项目,暂时还没见到别的在线编辑器有这种功能的.另外在 CodeSandbox 上能获得接近本地编辑器的体验,直接把 vscode 的主题和设置导入到 CodeSandbox,体验真心不错.还有一些黑科技,比如用 Node 容器编译一些在本地不太好编译的东西,那速度谁用谁知道:smirk:.

CodeSandbox 官网

CodeSandbox GitHub

可以了解下 StackBlitz

另外一个提供类似体验的在线编辑器,也是基于 vscode,优点是国内速度会稍微快些,只是暂时还不支持 node 容器或者自定义 webpack 的项目.

下面记录了使用 CodeSandbox 过程中的一些问题,和解决方法,以供有需要的同学参考.

CodeSandbox 国内访问慢

主要是有个谷歌字体的 api 一直卡着解决办法,使用下面的插件,替换谷歌字体的 api 替换为国内的有分别提供 Chrome 和 Firfox 的插件. ReplaceGoogleCDN GitHub

不过就算替换了谷歌字体,第一次加载也需要挺久的,尝试创建了一个默认的 React 模板,加载要 40s+,根据网络波动有差异.后面使用缓存配合 HMR 算勉强能用吧.

如果使用 node 容器,还会更慢,所以推荐如果要用 CodeSandbox 的话搭配科学上网食用会更香.

从 GitHub 直接导入到 CodeSandbox

CodeSandbox 支持直接从 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 类型来解决.

模板分类
- Client
  - Angular CxJS Dojo Preact React Reason Static Svelte Vanilla Vue
- Server
  - Apollo Ember Gatsby Nest Next.js Node Nuxt.js Sapper Styleguidist
- Presets
  - React+TS Vanilla+TS

CodeSandbox 还支持其他多种方式导入,详情参考文档Importing Sandboxes

针对 CodeSandbox 定制,开箱即用的模板

最终结果

预览

CodeSandbox 地址

GitHub 仓库

基础模板

basic-react GitHub

React 基础环境配置详细说明

配置 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