jsbin 4.1版本的本地搭建

jsbin是一种开放源码的协同Web开发调试工具(http://jsbin.com/?html,output)。其优点是可以快速的提供前端需要的各种开发环境,快速地编辑代码,并实时显示页面最终的效果。

其实类似的在线代码运行工具有很多,比较有名的有codepen、runjs、codeanywhere等等。但jsbin的一个显著特点是开源。开发者们可以在自己的爱机上搭建一套自己的运行环境。这个应该是众多前端程序员儿时的梦想吧,amosworker(本人)也一样。

虽然在github上有开源的代码可以直接拷贝,也有说明文档,但搭建的过程并不是特别风顺的。在解决了遇到的所有问题后,amosworker想在此和大家分享一下搭建的方法,希望对大家有用。

Git clone

首先需要从 https://github.com/jsbin/jsbin 下载到源码。也可以用npm来直接安装源代码,但本人试了几次都不能成功。

于是采用了git clone的方法直接将代码拉取到本地。

安装

拉取完成后,运行

进行安装。(在此需要注意一下,node的版本需要为7.x)

如果遇到npm安装不成功,作者建议用yarn来安装。

安装成功后迫不及待的运行

发现直接报错

接下来就是要创建jsbin的数据库了。

先建立数据库

在build文件夹中找到一个full-db-v3.mysql.sql的文件,复制里面的sql语句,在workerbench里执行。然后启动数据库。运行bin/json 命令就可以启动jsbin的服务了。

注册本地用户

随意输入用户名、邮箱和密码就可以完成注册,不用进行邮箱确认

有了用户名我们就可以保存我们的劳动成果了O(∩_∩)O哈哈~

解决output无法运行的问题

在html中输入代码后,发现在右侧的output,没有任何反应。打开控制台后,发现output里有一连串的404报错。

另外,还会有一个路径是“*/blog/all.json” 的404报错,我们可以建一个public/blog/all.json的空文件来解决,或者将public/js/chrome/welcome-panel.js里的关于all.json的ajax请求注释掉。

到这里,本地的jsbin终于可以正常运行了。O(∩_∩)O哈哈~

今天是圣诞节,祝大家圣诞快乐! Merry Christmas!

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171225G0SG0U00?refer=cp_1026

相关快讯

扫码关注云+社区