介绍
npm 包 interactive-sandbox 是一个基于 Webpack 和 React 的 JavaScript 学习工具，能够提供一个可交互式的沙箱环境，方便学生在浏览器中直接调试和运行代码。
安装
在终端中运行以下命令来安装 interactive-sandbox：
--- ------- -------------------
使用
安装完成后，你需要在你的代码中引入 interactive-sandbox 的 JavaScript 文件：
------ ------------------ ---- ----------------------
此时你就可以创建一个 InteractiveSandbox 实例，然后将其渲染到页面中。以下是一个简单的实例：
------ ------------------ ---- ----------------------
------ ------ - --------- - ---- --------
------ -------- ---- ------------
----- --- ------- --------- -
------------------ -
-------------
----------------- - -----------------------------
-
------------------- -
-------------------
-
-------- -
------ -
-------------------
--------------------------------
--
--
-
-
-------------------- --- ---------------------------------在上面的代码中，我们首先导入了 InteractiveSandbox，并在组件的 render 方法中创建了一个实例。这个实例会渲染出一个包含一个编辑器和一个运行按钮的界面。
我们还传递了一个 onCodeChange 方法作为 props，该方法会在用户修改沙箱中的代码时被调用，并传递修改后的代码作为参数。
props
InteractiveSandbox 组件可以接受以下 props：
onCodeChange(code: string)
当用户修改沙箱中的代码时调用。该方法会传递修改后的代码作为参数。
initialCode: string
设置编辑器的初始代码。
moduleSources: object
设置沙箱中能够使用的模块。这是一个对象，其属性为模块的名称，值为模块的 URL。
例如，以下代码会在沙箱中加载一个名为 lodash 的模块：
-------------------
----------------
------- ---------------------------------------------------------------------
--
--editorProps: object
设置编辑器的属性。这是一个对象，其属性为 CodeMirror 编辑器的属性。
例如，以下代码会将编辑器的前景色设置为白色：
-------------------
--------------
---------------- -----
------ -----------
------------ -----
-------------------- -----
----- -------------
------ ----------
--
--onChange(): function
当编辑器中的代码发生更改时调用的回调函数。
runButtonText: string
设置运行按钮的文本。
runButtonClassName: string
设置运行按钮的类名。
sandboxTimeout: number
设置沙箱中代码的超时时间。
skipValidation: boolean
设置是否跳过代码的验证。如果设置为 true，则会跳过代码的语法验证。
总结
interactive-sandbox 是一个非常有用的工具，可以让学生在一个安全的环境中直接修改和运行代码。通过使用这个工具，我们可以提高学生的学习效率，并帮助他们更好地理解 JavaScript。希望这篇文章能够帮助你更好地使用 interactive-sandbox。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/87239