// 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、真实的模块,而无需先安装任何东西。”