如何通过Define API在Codesandbox.io创建Cloud Sandbox而非Browser Sandbox

是的，你可以通过在getParameters的配置中添加environment参数，指定对应Cloud Sandbox的环境标识，直接创建新版Cloud Sandbox，无需先创建Browser Sandbox再手动fork。

修改代码实现 #

只需要在调用getParameters时，新增environment字段并设置为'node'（这是Cloud Sandbox的通用环境标识，适配绝大多数前端/Node项目），即可直接生成Cloud Sandbox：

import { getParameters } from 'codesandbox/lib/api/define'
import type { IFiles } from 'codesandbox-import-utils/lib/api/define'

export const createChartSandbox = (chartTemplate: any) => {
  const files: IFiles = {}
  Object.keys(chartTemplate).forEach(filePath => {
    files[filePath] = {
      content: chartTemplate[filePath],
      isBinary: false
    }
  })
  // 添加environment参数指定Cloud Sandbox环境
  const parameters = getParameters({ 
    files,
    environment: 'node' // 关键配置，直接创建Cloud Sandbox
  })
  const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${encodeURIComponent(parameters)}&view=split`
  return url
}

额外说明 #

• 除了'node'，还可以根据项目类型选择其他Cloud Sandbox环境标识，比如纯静态页面用'static'，Vue项目用'vue-cli'，React项目用'create-react-app'等；
• 如果需要指定特定的Node版本，还可以搭配nodeVersion字段（比如nodeVersion: '20'）进行配置；
• 修改后生成的Sandbox会直接以Cloud Sandbox模式运行，顶部不会再显示fork到Cloud Sandbox的提示，直接使用更稳定的Cloud环境特性。

内容的提问来源于stack exchange，提问作者nstuyvesant