在 CodeSandbox 开辟基于 Webpack 的项目

2019年8月31日 447次阅读来源: XYShaoKang

之前有用过 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 直接导入到 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

算法网