Mac 安装 nodejs （图文详细步骤）及SublimeText运行JavaScript控制台

 

一、Mac 安装 nodejs

前言

由于自己的拓展需求，要临时使用到node.js，所以此次本君就在此mark下 Mac 下node.js的安装和简单的检验示例，给各位小主留个标记，提高下以后的效率。本章对于一些小白而言还是具有普及意义的。

---

step 1：

• 访问nodejs官网（https://nodejs.org/en/），点击红色选框区域的v6.10.0 LTS版本并下载，详见下图：

官网版本.png

step 2：

• 双击刚下载的.pkg文件，打开之后按照步骤默认安装就行，安装完成后的截图如下：

安装完成.png

step 3：

• 安装完成后，需要进一步验证下版本号等信息，在LaunchPad中打开终端，分别输入 :
  npm -v
node -v
  两个命令，如下图出现版本信息，说明安装成功。

终端验证版本号.png

step 4：

• 新建一个js文件，nodejsTest.js , 输入下面的代码, 并保存

var http = require("http");

http.createServer(function(request, response) {
    response.writeHead(200, {
        "Content-Type" : "text/plain"
    });
    response.write("Welcome to Nodejs");
    response.end();
}).listen(8000, "127.0.0.1");

console.log("Creat server on http://127.0.0.1:8000/");

打开终端进入 nodejsTest.js 所在目录， 输入 node nodejsTest
终端显示如下：

终端运行.png

打开浏览器，点击或者输入http://127.0.0.1:8000/， 如果无法打开，可以将刚才新建的js文件中的.listen(8000, “127.0.0.1”) 的ip监听改成 .listen(8000)，然后点击或者输入http://localhost:8000/

浏览器测试.png

---

二、#Mac系统下SublimeText运行JavaScript控制台

Sublime Text 2下载地址：(http://www.sublimetext.com/)

Sublime Text 2.png

前言

JavaScript控制台的调试和输出在浏览器端的使用算是工作中常用了，作为前端开发主力编辑器Sublime Text本身是不支持JavaScript的输出和运行的。有的时候我们需要看一下输出的效果，不得不借助于F12查看控制台的程序。作为插件系统及其丰富的编辑器，我们可以通过添加Build System的方法来让Sublime Text支持Javascript Console控制台调试。

JSC方式（Mac OS X）

step 1：

Mac内置了一个javascript控制台程序，路径比较深,(可以用命令"open 目录"来打开目录)

/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc  

打开目录.png

step 2：

启动Sublime Text，Tools > Build System > New Build System，如下图所示:

New Build System.png

step 3：

• 配置选项内容，保存在默认的User目录

{  
    "cmd": ["/System/Library/Frameworks/JavaScriptCore.framework/Versions/A/Resources/jsc", "$file"],  
    "selector": "source.js"  
}  

保存.png

• 菜单SublimeText->preferences->browser pakager,打开目录

打开目录.png

step 4：

新建一个JS文件测试控制台输出效果,使用快捷键Command + B按钮进行调试，需要注意的是这里使用debug，而不能使用console.log；选择编译系统，菜单Tools > Build System > Automatic或者JSC

var temp = {name:'lili',age:28};  
for (var i = 2; i >= 0; i--) {  
    debug("Sublime Test3:"+i);  
}  
debug(temp);  
// 输出  
// --> Sublime Test3:2  
// --> Sublime Test3:1  
// --> Sublime Test3:0  
// --> [object Object]  

截图如下所示：

截图.png

NodeJS方式

step 1：

下载安装NodeJS，安装步骤详见上文所述，检查是否安装了NodeJS，在终端中运行 node -v 命令

step 2：

重复上文中JSC方式的第二步，在Build Sytem添加以下内容:保存为NodeJS.sublime-build

{  
    "cmd": ["node", "$file"],  
    "selector": "source.js"  
}  

按照如上方式操作后，你可能会发现自己怎么不OK呢？！可能自己就是那不幸运的一部分，如果你没有成功也不用着急，可以参考以下方式，接着来Do it！
在终端运行:which node
获取路径如下:/usr/local/bin/node
重新配置如下:

{  
    "cmd": ["/usr/local/bin/node", "$file"],  
    "selector": "source.js"  
}  

step 3：

测试输出效果:

var temp = {name:'lili',age:24};  
for (var i = 2; i >= 0; i--) {  
    console.log("Sublime Test3:"+i);//在NodeJS下没有debug()函数  
}  
console.log(temp);  
// 输出  
// Sublime Test3:2  
// Sublime Test3:1  
// Sublime Test3:0  
// { name: 'lili', age: 24 }  

安装Package Control

如果需要使用Sublime Test安装插件，可以访问这个网站https://packagecontrol.io/installation，按照说明安装Package Control。重启sublime text，在package control Install中搜索这个插件并下载。也就是说这个插件可以在sublime中直接搜索下载。