nodejs+express搭建javascript在线IDE-详细内容

文章内容

2017/7/26 17:57:40,作者: 黄兵

nodejs+express搭建javascript在线IDE

node项目后台启动

npm install forever -g
forever start bin/www

项目地址

github:https://github.com/sixtrees/js-online-running

背景

这两天在看阮一峰的《ES6标准入门》，对其中涉及到的代码示例部分，感觉到很不方便，不知道阮老师是如何进行代码调试的。可能是在nodejs环境或者直接在浏览器的控制台中进行调试。我每次都是在nodejs命令行中进行代码编写，由于命令行本身的特点，有一句代码编写错误，都可能导致需要重写所有的代码。

像下图中所示的情况一样，当我们由java或者其他语言的编写习惯造成的语法错误for (var item of set )，导致测试代码没能得到正确的输出，这时候我们就需要重头来过，这体验当然是不好的，在浏览器的控制台中这种情况，会好一点。但是，一旦我们不小心触碰到了ENTER按键，那就悲剧了。

我也曾异想天开的认为既然nodejs可以使用node app.js来启动nodejs程序，那为什么不试试用node test.js来进行代码测试呢。经过测试，发现是可以的，但是这样，我每一次都要在命令行和文本编辑器之间进行切换。

由于，我想简单点，开发一个基于web的IDE来运行我们输入的javascript或者es2015也就是es6代码。经过一个晚上加一个上午的构思和代码编写，已经完成了基础代码的编写。下图就是这个项目的一个运行示例。利用CodeMirror插件来作为代码编辑插件，并且根据需要，改写了CodeMirror官方的javascript-hint.js文件，使得代码提示的效果更丰富，同时也发现了网上大多数坑人的帖子带来的问题，后面都要有详细的说明。先来简单的看一下我们的系统长什么样吧，至于界面的设计，大家就将就的看一下，毕竟功能才是我们所需要的。

如何安装

目前，我已经将代码托管至github(点我)。下面，我来演示如何安装本平台，请大家放心，不会涉及太多复杂的东西，因为这个系统只是一个很简单的IDE环境。

先在webstorm下看一下项目结构：

下面开始进入安装阶段。项目采用的是express进行开发的，因此，主要的npm依赖见下面的代码区。

  "dependencies": {
    "body-parser": "~1.17.1",
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.3",
    "express": "~4.15.2",
    "hbs": "~4.0.1",
    "morgan": "~1.8.1",
    "serve-favicon": "~2.4.2"
  }

好了，我们开始连接服务器或者在自己的电脑上打开命令行（我用的msysgit，大家也可以用cmder）进入到我们的工作文件夹，我这里用的是自己的D盘下面的nodejs文件夹，可以使用如下命令进行快速进入

Administrator@neil-PC MINGW64 /d/nodejs
$ cd
$ cd d:/nodejs
$ pwd
/d/nodejs
$ git clone https://github.com/sixtrees/js-online-running.git

克隆完成后，进入js-online-running文件夹。

执行npm安装项目的依赖，关于npm install 如何安装package.json文件夹下的依赖，请大家自行了解其中缘由。

$ npm install
js-online-running@0.0.0 D:\nodejs\js-online-running
+-- body-parser@1.17.2
+-- cookie-parser@1.4.3
+-- debug@2.6.8
+-- express@4.15.3
+-- hbs@4.0.1
+-- morgan@1.8.1
`-- serve-favicon@2.4.3

安装好npm的依赖之后，我们就可以使用node bin/www来运行项目了。bin/www文件时系统启动文件，请不要用node app.js来试图运行本系统。还有就是不要在bin之前加/，这是画蛇添足。执行node bin/www后，node就会启动localhost:3000作为项目的部署地址了，端口号可以在bin/www文件中进行修改。此时，是没有任何输出的，如果你是用webstorm打开的，推荐大家使用nodemon等热部署解决方法。具体的方法，请自己自行上网查找解决方案，反正就是很简答的那种。像用IDEA来开发java，我会推荐大家使用JRebel来进行热部署。这样的东西是可以提供编程的效率的。