{"id":17288371,"url":"https://github.com/theajack/jsbox","last_synced_at":"2025-04-11T23:04:43.291Z","repository":{"id":38180340,"uuid":"247236512","full_name":"theajack/jsbox","owner":"theajack","description":"JS online runtime sandbox (JS在线运行环境，在线IDE)","archived":false,"fork":false,"pushed_at":"2024-04-24T14:21:39.000Z","size":10006,"stargazers_count":55,"open_issues_count":1,"forks_count":16,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-24T16:55:42.102Z","etag":null,"topics":["js-online","js-sandbox","monaco"],"latest_commit_sha":null,"homepage":"https://shiyix.cn/jsbox/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theajack.png","metadata":{"files":{"readme":"README.cn.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-03-14T08:04:57.000Z","updated_at":"2024-04-23T03:11:10.000Z","dependencies_parsed_at":"2024-04-24T15:04:24.614Z","dependency_job_id":null,"html_url":"https://github.com/theajack/jsbox","commit_stats":{"total_commits":106,"total_committers":2,"mean_commits":53.0,"dds":0.4056603773584906,"last_synced_commit":"50edcb20f4de2932f60339a5df44aee67c079718"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theajack%2Fjsbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theajack%2Fjsbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theajack%2Fjsbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theajack%2Fjsbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theajack","download_url":"https://codeload.github.com/theajack/jsbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246030131,"owners_count":20712325,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["js-online","js-sandbox","monaco"],"created_at":"2024-10-15T10:27:22.310Z","updated_at":"2025-03-28T12:30:47.647Z","avatar_url":"https://github.com/theajack.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 [JsBox](https://www.github.com/theajack/jsbox) JS在线运行环境 \r\n\r\n[English](https://github.com/theajack/jsbox#readme) | [立即体验](https://theajack.github.io/jsbox) | [配置体验地址](https://theajack.github.io/jsbox?config=theajack.store)\r\n\r\n这是一个在线运行调试js的项目, 也支持多种编程高亮\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/jsbox.png)\r\n\r\n\u003cdetails\u003e\r\n    \u003csummary\u003e查看更多示例图\u003c/summary\u003e\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/jsbox1.png)\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/jsbox2.png)\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/jsbox3.png)\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/jsbox4.png)\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/jsbox5.png)\r\n\r\n\u003c/details\u003e\r\n\r\n## 0. 快速插入您的在线演示\r\n\r\n### 0.1 配置文件\r\n\r\njsbox支持通过参数配置一个cdn文件作为演示内容，其中文件内容形式如下\r\n\r\n```js\r\nwindow.jsboxConfig = {\r\n    libs: {\r\n        // 需要引入的第三方库的cdn 文件单个库使用字符串，多个使用数组\r\n    },\r\n    iifeMap: {}, // 使用 cdn 时全局变量的映射\r\n    codes: {\r\n        // 您的演示代码\r\n    },\r\n    // 其他配置\r\n    theme: 'dark', // 默认为 dark， 可选值为 dark，light\r\n}\r\n```\r\n\r\n你也可以使用字符串形式，其他参数全部使用默认值\r\n\r\n```js\r\nwindow.jsboxConfig = ``; // 此处放您的代码 语言默认为javascript\r\n```\r\n\r\n这里有一个简单的[示例文件](https://github.com/theajack/store/blob/main/jsbox.config.js)\r\n\r\nlibs除了使用cdn地址，也可以使用jsbox内置库, 内置库使用name即可，JsBox 内置库list如下 （版本较旧，推荐自行配置）\r\n\r\n```js\r\n['jquery', 'vue', 'react', 'react-dom', 'angularjs', 'vuex', 'redux', 'loadsh', 'virtual-dom', 'node-html-parser', 'jest', 'mocha', 'moment', 'dayjs', 'underscore', 'axios', 'qrcode', 'backbone', 'js-xlsx', 'recast', 'cnchar', 'cnchar-poly', 'cnchar-order', 'cnchar-trad', 'cnchar-draw', 'cnchar-idiom', 'cnchar-xhy', 'cnchar-radical', 'cnchar-all', 'easy-icon', 'element-ui', 'element-ui-style']\r\n```\r\n\r\n#### libs 详情\r\n\r\nlibs 为配置第三方库的CDN地址, 如下表示定义了一个第三方库名为 tc-store，下载地址为 https://cdn.jsdelivr.net/npm/tc-store\r\n\r\n```json\r\n    \"libs\": {\r\n        \"tc-store\": \"https://cdn.jsdelivr.net/npm/tc-store\"\r\n    },\r\n```\r\n\r\n#### iifeMap 详情\r\n\r\n通过 CDN 加载下来的库都为 iife 格式的，需要通过 iifeMap 指定挂载在 windows 上的对象名称，后续代码中的 import 语句都会从这个指定规则中读取\r\n\r\n以下配置表示 tc-store 的引入 底层会通过 window.TCStore 来使用\r\n\r\n```json\r\n    \"iifeMap\": {\r\n        \"tc-store\": \"TCStore\"\r\n    },\r\n```\r\n\r\n```js\r\nimport {createStore} from \"tc-store\";\r\n// 会被转换成\r\nconst {createStore} = require(\"tc-srore\"); // require内部最终引用的是window.TCStore\r\n```\r\n\r\n#### codes 配置详情\r\n\r\ncodes 为一个Json类型，可以配置多个demo，当有多个key-value时，jsbox左侧会显示列表，当仅有一个时，列表会被隐藏。\r\n\r\n```ts\r\n\"codes\": {\r\n    \"Demo1\": {\r\n        code: string,\r\n        dep?: string[], // 当前demo的依赖，值为libs中配置的key\r\n        lang?: 'html'|'js', // 默认为js\r\n        desc?: string, // 当前demo的描述信息\r\n        hideLog?: boolean, // 是否需要隐藏调试工具，默认为false\r\n        needUI?: boolean, // 是否需要展示UI，当lang=html时默认为true，否则默认为false\r\n        title?: string, // 开启新的章节并作为章节标题\r\n        doc?: string, // 当前示例的文档\r\n    },\r\n    // 其他demo\r\n}\r\n```\r\n\r\n#### 配置文件自动生成\r\n\r\n手动编写配置文件会有些麻烦，可以使用 jsbox-cmd 工具自动生成，请参考[jsbox-cmd](https://github.com/theajack/jsbox/tree/master/cmd)\r\n\r\n### 0.1.1 配合github仓库使用（推荐）\r\n\r\n将您的单文件放在您的github仓库中，演示url地址为 https://theajack.github.io/jsbox?github=user.rep.file\r\n\r\n- user 参数为您的github账号\r\n- rep 参数为您的项目名称，后面可以带 @xxx 来执行 release、branch或commit，默认使用最新的 release号，如果没有则使用master分支\r\n- file 参数可选，表示配置文件在项目中的相对地址，默认为 jsbox.config.js\r\n\r\n以下是一些可能的延迟地址\r\n\r\n- https://theajack.github.io/jsbox?config=theajack.pure-v\r\n- https://theajack.github.io/jsbox?config=theajack.pure-v@master\r\n- https://theajack.github.io/jsbox?config=theajack.pure-v.helper/custom.code.js\r\n   \r\n#### 0.1.2 使用cdn地址\r\n\r\n将您的js code 配置文件放在部署在某个服务器上，拿到他的http地址，如 http://xxx.com/config.js\r\n\r\n则以下是您可以使用的在线演示地址\r\n\r\nhttps://theajack.github.io/jsbox?config=${decodeURIComponent('http://xxx.com/config.js')}\r\n\r\n### 0.2 使用硬编码的单链接\r\n\r\n#### 0.2.1. 打开jsbox\r\n\r\n进入 jsbox [工作台](https://theajack.github.io/jsbox)\r\n\r\n#### 0.2.2. 选择环境，输入演示代码\r\n\r\n##### 0.2.2.1. 纯js演示代码实例\r\n\r\n输入演示代码\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/use1.png)\r\n\r\n##### 0.2.2.2. 依赖第三方库以及dom交互\r\n\r\n选择html语言\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/use2.png)\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/use3.png)\r\n\r\n输入演示代码\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/use4.png)\r\n\r\n#### 0.2.3. 生成演示链接\r\n\r\n![jsbox](https://cdn.jsdelivr.net/gh/theajack/jsbox/cdn/images/use5.png)\r\n\r\n至此，一条含有演示代码的链接复制到了剪切板，你可以在其他地方引用。\r\n\r\n除此之外你还可以通过菜单栏配置主题色，第三方包，字体大小等设置，这些设置也会在生成链接的时候被保存到连接中\r\n\r\n## 1. 操作手册\r\n\r\n### 1.1. 功能\r\n1. 运行和编辑js、html、css代码\r\n2. 加载第三方库的cdn文件\r\n3. 导出链接，其他人使用链接可以直接使用您编辑的代码\r\n4. 导出html文件\r\n5. 颜色主题，风格与vscode对齐\r\n6. 自定义log类型，自定义字体大小\r\n\r\n### 1.2. 快捷按键与按钮说明：\r\n\r\n1. ctrl + : 放大字体\r\n2. ctrl - : 缩小字体\r\n3. ctrl m : 切换主题\r\n4. ctrl d : 清空代码\r\n5. ctrl s : 暂存代码：暂存之后代码会被保存起来，刷新页面或重置代码都会还原到保存的状态\r\n6. ctrl e : 重置代码：回到初始态或暂存状态\r\n7. ctrl q : 复制代码\r\n8. ctrl n : 打开运行环境选择\r\n9.  ctrl l : 生成链接：该链接打开可以还原当前正在编辑的代码\r\n10. ctrl e : 清空log\r\n11. ctrl enter : 运行代码\r\n12. ctrl h : 切换是否代码换行\r\n\r\n### 1.3. search参数：\r\n\r\n1. theme=dark: 开启dark代码编辑模式，默认为normal\r\n2. code=xxx: 设置编辑器代码，需要经过 encodeURIComponent\r\n3. lib=Array\u003clink|name\u003e: 加载第三方库，可以是一个url或者[jsbox预定义的库](https://github.com/theajack/jsbox/blob/master/cdn/resources.js)，需要经过 encodeURIComponent\r\n    如果不是url，且不在jsbox预定义库中，jsbox会尝试从unpkg官网获取，但不保证可用\r\n4. config=link: 使用自定义的配置文件url\r\n5. id=string: 使用指定的id加载代码块，需要与config参数一起使用\r\n6. env: 使用[jsbox预定义的运行环境](https://github.com/theajack/jsbox/blob/master/cdn/env.js)\r\n   \r\nconfig \u003e env \u003e lib\r\n\r\n### 1.4. config参数\r\n\r\n详情见 0.3\r\n\r\n### 1.5. hash参数\r\n\r\n1. #saved 使用暂存代码填充编辑器\r\n2. #hello 进入欢迎页\r\n\r\n\r\n### 1.6. 预定义方法\r\n\r\n在jsbox中，您可以使用以下方法\r\n\r\n1. log(arg1,arg2,...): 打印内容\r\n2. copy(string): 复制内容到剪切板\r\n3. $run(): 重新运行代码\r\n4. $dom: [link-dom API](https://github.com/theajack/link-dom#readme)\r\n5. $: document.querySelector 的快捷方式\r\n6. $app: UI的渲染容器 dom 元素\r\n\r\n### 1.7 注意事项\r\n\r\n1. 使用 config 参数时，可以使用 config=user.repo@xxx，xxx可以表示分支或者release版本号，注意默认是使用最新的release版本好\r\n2. 修改jsbox之后，jsdelivr会有缓存，需要访问 https://purge.jsdelivr.net/gh/{user}/{repo}/jsbox.code.js 刷新一下缓存\r\n\r\n\r\n## 2. API 接入\r\n\r\n### 2.1. 如何使用\r\n\r\nJSBox 是一个通用的 在线js运行环境，您可以通过编写配置文件定制属于自己的js运行环境\r\n\r\n#### 2.2. npm 安装 \r\n\r\n```\r\nnpm install jsbox-util\r\n```\r\n\r\n```js\r\nimport JSBox from 'jsbox-util';\r\n```\r\n\r\n#### 2.3. cdn引入\r\n\r\n```html\r\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/jsbox-util/jsbox.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n#### 2.4. 使用\r\n\r\n##### 2.4.1 跳转到新页面打开JSBox\r\n```ts\r\n// 公共配置, 非必须\r\nJSBox.config({\r\n    theme?: string;\r\n    code?: string;\r\n    lib?: Array\u003cstring\u003e;\r\n    id?: string;\r\n    env?: string;\r\n    lang?: string;\r\n    run?: boolean;\r\n    mes?: boolean;\r\n    remind?: boolean;\r\n    config?: string; // 配置文件 cdn 地址\r\n})\r\n\r\nJSBox.open(); // 使用公共配置或默认配置打开jsbox\r\n\r\nJSBox.open({\r\n    ... // 使用临时配置打开JSBox\r\n});\r\n\r\n```\r\n\r\ntheme, lib, env, lang 可用值请参考3.3参数说明\r\n\r\n##### 2.4.2 内嵌JSBox\r\n\r\n功能开发中......\r\n\r\n##### 2.4.3 参数说明\r\n\r\n1. theme: 开启dark代码编辑模式，默认为light, 可选dark\r\n2. code: 设置编辑器代码，需要经过 encodeURIComponent\r\n3. lib: 加载第三方库，可以是一个url或者[jsbox预定义的库](https://github.com/theajack/jsbox/blob/master/src/npm/index.d.ts#L26)，需要经过 encodeURIComponent\r\n    如果不是url，且不在jsbox预定义库中，jsbox会尝试从unpkg官网获取，但不保证可用\r\n4. config: 使用自定义的配置文件url\r\n5. id: 使用指定的id加载代码块，需要与config参数一起使用\r\n6. env: 使用[jsbox预定义的运行环境](https://github.com/theajack/jsbox/blob/master/src/npm/index.d.ts#L58)\r\n7. lang: 设置[开发语言](https://github.com/theajack/jsbox/blob/master/src/npm/index.d.ts#L66)，优先级低于 env 和 config+id 中配置的语言\r\n8. run: 当有code时，会自动运行，如不希望自动运行，请设置 run=false\r\n9. remind: 默认当代码改变时离开或刷新页面 会触发弹窗提示，如不希望提示，请设置 remind=false\r\n10. mes: 加载第三方库时会有加载提示，如不希望提示，请设置 mes=false","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheajack%2Fjsbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheajack%2Fjsbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheajack%2Fjsbox/lists"}