// CASE_FILE > JS_VERSE

前端 · 工具2024

JavaScript-Verse

试用 JavaScript 或 React 通常意味着要搭一套沙箱。我构建了一个浏览器内的演练场,运行真实代码、真实的 npm 模块和 React,无需安装。

100%
浏览器内,无服务器
0
需要安装
1
点击即运行
humblef0ol.github.io/javascript-verseFEED//LIVE
> run main.jsx
[ok] babel transpile
[ok] npm module resolved
[ok] iframe sandbox
preview .............. live
status: RUNNING
$

// 01 > CONTEXT

JavaScript-Verse 是一个基于浏览器的代码执行环境与 Markdown 编辑器,用于编写和运行 JavaScript 与 React,配有并排文档、速查表和代码导出。

// 02 > THE_PROBLEM

试验 JavaScript 或 React 意味着要么本地装一套工具链,要么用一个无法拉取真实 npm 模块或渲染组件的受限沙箱。

在浏览器中安全地运行不可信代码、转译 JSX 与现代语法,以及在没有服务器的情况下解析导入,每一项都非同小可,因此大多数演练场都会在其中一项上偷懒。

之前

试验需本地搭建 · 没有真实 npm 模块 · 不支持 JSX

// 03 > APPROACH

我用 iframe 隔离解决安全执行,用浏览器内的 Babel 转译解决高级语法,用浏览器内打包解决导入。

沙箱化执行

代码在一个隔离的 iframe 内运行并实时预览,因此任意代码都能安全运行。

真实模块 + JSX

浏览器内的 Babel 转译 JSX 与现代语法;浏览器内打包解析任意 npm 导入。

React.jsTailwind CSSBabelWebpackNode.js

// 04 > THE_RESULT

任何人都能在浏览器中编写并运行 JavaScript 或 React、拉取真实的 npm 模块并导出代码,无需安装任何东西。

之前

  • 需要本地工具链
  • 不支持 npm 模块
  • 不支持 JSX / React 渲染

之后

  • 在浏览器中运行,无需安装
  • 运行时支持任意 npm 模块
  • JSX + React,沙箱化
学一样东西最快的方式就是运行它。我想要真实的 JavaScript 和 React、真实的模块,而无需先安装任何东西。
AAmit RanaAuthor, JavaScript-Verse

遇到了类似的问题?

预约 20 分钟通话