大家好，我是Echa。

好消息，Codesandbox 研发团队2023年2月16日正式发布 Sandpack v2.0 版本，距离Sandpack v1.0 版本（2021年12月2日）正式开源，相隔时间是441天。在这段空档时间，Codesandbox 研发团队为了占据前端市场也是下了苦功夫，要同时兼容当前前端非常流行的框架和组件，具体有NodeJS、Next.js、React、Vue、Vite、Svelte、Astro、Express.js、VuePress等等几十种，真的了不起。小编给他们点32个赞。

下面小编给大家详细介绍Codesandbox 研发团队开源的Sandpack。

前言

前端程序员有时候需要经常写一些测试代码或示例，然后将这些代码分享给他人，少量的代码通过GitHub分享有点大材小用，而且他人要从GitHub上fork代码后，在本地用IDE打开，然后安装依赖、运行，这个步骤过于繁琐。

因此使用在线代码编辑器就能解决上面说到的问题，后面陆续就诞生了知名的CodePen，Jsfilddle和Jsbin也有使用过，对比起来，还是 CodeSandbox 比较好用。

什么是Codesandbox？

官网地址：https://codesandbox.io/

Github：https://github.com/codesandbox/codesandbox-client

CodeSandbox 是一个在线的代码编辑器，主要聚焦于创建 Web 应用项目。号称JavaScript线上沙箱环境神器！

• 支持常见文件格式：JavaScript、TypeScript、CSS、Less、Sass、HTML 等。
• 支持自动代码提示。
• 该平台的前端版本是 开源 的。

使用它绝对能满足你在线代码编辑的要求，我想唯一问题就是，访问它比较慢，因为它是国外的。如果你会用VPN，那是非常实用，好玩。

特点

• 快速开始：codesandbox拥有所有流行框架的模板，方便你快速创建项目
• 任何地方都能写代码：一个完备的线上web开发 IDE
• 急速构建原型：你可以在 codesandbox 上创建web app，试验代码和想法，分享创作

具体如下图：

CodeSandbox官网

官方创建Sandbox的页面多种模板代码选择

一个完备的线上web开发 IDE

什么是Sandpack？

在线文档：https://sandpack.codesandbox.io/docs

Github：https://github.com/codesandbox/sandpack

Sandpack是CodeSandbox开源的浏览器打包方案。

这次开源两个包：

• @codesandbox/sandpack-client ：负责加载Sandpack以及通信
• @codesandbox/sandpack-react：是针对React的封装库

你可以在纯JS中使用sandpack客户端，或者为Vue、Svelte或任何其他库制作自己的包装，真的！

让我们快速看看sandpack react中的一些示例：

export default function App() {
  return <h1>Hello world</h1>
}

// Hello world

在本例中，我们渲染默认编辑器，并指定一些要运行的自定义文件以及lodash依赖项。这允许您快速创建实时运行的代码示例。这些示例不依赖CodeSandbox；如果CodeSandbox关闭，Sandpack将继续运行。

具体有哪些人在用Sandpack？

React Docs

新的React Docs使用Sandpack作为示例和挑战。React团队希望为他们的新网站全面设计和定制Sandpack，通过Sandpack他们可以定制一切。从编辑器到如何显示错误：

GitLab Web编辑器

GitLab有一个web编辑器，允许您在浏览器中编写代码并直接提交到GitLab。Gitlab正在使用Sandpack执行前端项目的代码，以便您可以看到实时结果：

Codeamigo

Codeamigo是一个可以学习字节大小的交互式编码教程的地方。他们将Sandpack与自定义编辑器一起用于运行代码：

CodeHike

CodeHike是一个允许您创建引导代码演练的库。他们使用Sandpack显示实时运行代码。在这种情况下，他们只使用Sandpack的预览，这也是一个很好的用例：

Sandpack v2.0. 更新具体内容：

Sandpack 2.0 引入 Nodebox，对标 StackBlitz 的 WebContainer，基于 Rust 重构了 Sandpack transpiler。

Nodebox带来了一组新的可能性，允许Sandpack在任何浏览器中运行几乎任何您可以想象的JavaScript应用程序。

如果你用过Sandpack就好知道：直接在浏览器中运行任何JavaScript应用程序。但在Sandpack v1.0版本中，“任何JavaScript应用程序”种最大警告是它只适用于客户端运行时执行。官方想改变这一点。

无论您的应用程序是否依赖于服务器或客户端运行时执行，在Sandpack中，它都应该适合您。这是我们迈向Sandpack v2.0 版本的关键目标。

为了实现这一点，Sandpack2.0引入了Nodebox，这是一种在浏览器中实现Node.js抽象的新技术。Nodebox带来了一组新的可能性，允许Sandpack在任何浏览器中运行几乎任何您可以想象的JavaScript应用程序。

我们相信，如果不比Sandpack v1所支持的规模更大的话，这个规模也可能同样巨大。使用Nodebox，您无需gitclone、*载下**特定的Node版本、在终端上运行脚本等-您可以在浏览器中几秒钟内运行Node项目，而无需在计算机上安装任何东西。此外，您可以在一个软件包中获得Sandpack的自定义UI、低占用空间和久经考验的真实开发体验。

接下来我们看看 Sandpack v2.0 版本同时支持流行前端模板：

NodeJS

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end('Hello world');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="node" />

效果如下图：

Next.js

export default function Home({ data }) {
  return (
    <div>
      <h1>Hello {data}</h1>
    </div>
  );
}
  
export function getServerSideProps() {
  return {
    props: { data: "world" },
  }
}

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="nextjs" />

Vite

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="vite" />

React(Vite)

import React from "react"

export default function App() {
  const data = "world"

  return <h1>Hello {data}</h1>
}

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="vite-react" />

Vue(Vite)

<script setup>
import { ref } from "vue";

const data = ref("world");
</script>

<template>
  <h1>Hello {{ data }}</h1>
</template>

<style>
h1 {
  font-size: 1.5rem;
}

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="vite-vue" />

Svelte(Vite)

<script>
const data = "world";
</script>

<h1>Hello {data}</h1>

<style>
h1 {
  font-size: 1.5rem;
}
</style>

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="vite-svelte" />

Astro

---
import "../styles.css";
const data = "world";
---

<h1>Hello {data}</h1>

<style>
  h1 {
    font-size: 1.5rem;
  }
</style>

import { Sandpack } from "@codesandbox/sandpack-react"
  
<Sandpack template="astro" />

在Node 任何一个地方可以搭建项目

使用Sandpack2.0，您可以将文档提升到一个全新的水平，因为Nodebox允许运行服务器端示例。继续添加Next.js或任何基于Vite的示例、Node脚本……所有这些都将为访问您的文档的每个人运行，无论其浏览器或设备如何。看看我们全新的Sandpack文档，了解您可以通过交互式文档实现的所有令人兴奋的事情。

这也意味着一次*服务性**器节点实例现在已成为现实。与节点仿真技术不同，Sandpack 2.0允许您快速轻松地运行可定制主题的服务器项目，几乎无需占用空间，无需服务器、注册、源代码管理、安装和运行步骤。

在CodeSandbox，我们致力于防止想法甚至是简单的好奇瞬间溜走。编程是解决现实问题的强大工具，我们只需要提供可访问性。Sandpack使得任何网站都可以将编码作为其内容的一部分，而现在，Nodebox也提供了服务器代码。看到人们学习和玩Sandpack 2.0，非常兴奋！

最后，Sandpack2.0为技术内容创作者、文档维护者、新在线工具的开发人员和其他创造性用途打开了一个全新的可能性世界，其中浏览器中的服务器环境可能很有用。

更重要的是，当使用Sandpack2.0时，您只需单击一下即可进入完整的开发环境。打开关于新CodeSandbox体验的任何示例，继续构建它，尽可能复杂。

Nodebox 性能提升

我们开始使用Nodebox是因为我们自己在CodeSandbox的内部需求，以及其他开发人员提出的几个外部请求，希望在任何浏览器中轻松运行Node。

Nodebox是Node.js的高级抽象。这意味着它没有实现Node.js中的一些小细节，但我们进行了各种调整，使其与每个浏览器兼容。因此，Nodebox的目标是应用程序兼容性，而不是Node.js特性的奇偶性。

在开发Nodebox时，性能也是我们的首要任务之一。我们使用Rust完全重写了Sandpack转发器，调整了缓存并进行了其他一些优化。结果如何？真的很快！例如，我们的Vite模板的热启动时间为500ms.

我们正在为Nodebox提供Next.js、Vite和Astro的开箱即用支持，但我们正在增长，以支持您可以想象的任何服务器端框架。但是，请记住，它不能运行napi或任何其他可以在Node.js-only WebAssembly和JavaScript模块中使用的低级C++/Rust包。Postgres、MongoDB和MySQL目前也不受支持，因为浏览器中缺少原始套接字支持。

此外，我们目前正在处理一些缺失的API，例如async_hooks、vm、worker_threads、自动进程退出（用户现在需要在进程退出之前手动调用process.exit）和同步exec/subject。Nodebox在iOS Safari中运行，但由于浏览器内存泄漏，它仍处于测试版支持状态。其中大部分计划在3月份进行。

与WebContainers的区别

我们得到Nodebox将总是与WebContainers进行比较。因此，以下是它们的区别概述。

WebContainers是一种允许您在浏览器中运行Node.js的技术。然而，它使用了SharedArrayBuffer等现代浏览器技术，这使得它无法在Safari中运行，并且需要用户在服务器上设置额外的跨源隔离头才能运行任何代码。

相反，我们在没有现代浏览器技术的情况下实现了Nodebox，以使其在任何浏览器（如iOS和Safari）中运行，只需最少的设置。这样做的缺点是，当您产生更多线程时，Nodebox将使用更多内存，并且我们无法获得完全的NodeAPI兼容性（例如，我们无法使用同步分叉）。这对Nodebox来说是可以的，因为它是为运行小项目和示例而构建的，它做得非常好。如果您想在浏览器中进行全面开发，我们建议改用我们的microVM技术。

强大的开箱即用

我们永远不会厌倦为每个人开发一个更容易访问的网络。

构建像Nodebox这样强大和快速的东西确实是一件令人愉快的事情，但除非我们为每个人制作它，否则它不会产生如此大的影响。因此，您可以将Nodebox用作NPM包，它允许您在任何浏览器、任何上下文和任何应用程序中运行Node.js。

例如，下面是如何在Nodebox中运行Express.js，只需几行代码：

import { Nodebox } from "@codesandbox/nodebox";

const previewIframe = document.getElementById("preview-iframe");
const nodeboxIframe = document.getElementById("nodebox-iframe");

(async () => {
  // Set up Nodebox and assign a bridge iframe
  const nodebox = new Nodebox({ iframe: nodeboxIframe });

  // Connect to the nodebox environment
  await nodebox.connect();

  // Write files to the node filesystem inside Nodebox
  await nodebox.fs.init({
    "package.json": JSON.stringify({
      dependencies: {
        express: "4.18.2",
      },
    }),
    "index.js": `const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello world')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})`,
  });

  // Create a shell interface to listen to events and start a command
  const shell = nodebox.shell.create();

  // Start a node command executing the index.js file (our Express.js server)
  // If there are any missing node_modules, Nodebox will automatically install them
  const { id } = await shell.runCommand("node", ["index.js"]);

  // Get the first URL the shell started and display it on an iframe
  const { url } = await nodebox.preview.getByShellId(id);
  previewIframe.src = url;
})();

下一步计划

Sandpack肯定会有光明的未来！

接下来，我们将致力于在Sandpack中启用microVM，这将允许您摆脱浏览器限制，并使用任何编程语言运行复杂的项目。

不幸的是，由于各种原因，我们没有开源Nodebox，其中一些原因超出了我们的控制范围，我们相信这项技术可能是改进DX的未来。因此，我们将继续探索未来是否可以开源。

我们迫不及待地想看到你将要建造的所有令人惊叹的东西！如果您遇到任何错误或希望请求任何缺失的功能，请在GitHub上打开问题。

我们非常感谢让这成为现实的他们。向Adewale、Alex、Artem、Bas、Danilo、Filipe、Ives、Jasper、Marco、Obinna、Oskar、Zeh以及GitHub上所有Sandpack贡献者致敬！