MacOS安裝使用Node.js

 

1. 到官網https://nodejs.org/zh-cn/download/下載，選擇Macintosh Installer, 以下：

2. 按預設的下一步，Node.js版本爲v6.10.0, NPM版本爲v3.10.10

3. 過程可能要輸入用戶密碼

4. 安裝成功以下：

5. 用終端驗證是否成功安裝, 輸入 node -v

6. console.log(1+2), 獲得結果3

 

7. 我Mac的Eclipse不支援EcmaScript 6, 例如 let 等ES6的關鍵子在Eclipse都驗證不過去。

大概Google下了，找到一個JavaScript支援很不錯的IDE，網址以下：

https://www.jetbrains.com/webstorm/

下載完，create一個工程，而後新增一個JavaScript文件：

8. 將hello_weekend配置爲Node.js來debug

 

9. Node interpreter設置爲Node.js的安裝路徑

10.  Script以下：

/**
 * Created by prolink on 17/3/19.
 */

var http = require('http');

var server =  http.createServer(function (req, res) {
    res.writeHead(200);
    res.end('Hello World');
});

server.listen(8088);

 

11. 這個http返回Hello World，並在該行鼠標左鍵點擊設置斷點

 

12. debug該文件

 

13. 成功啓動以後看到Console有相關的資訊

 

14. Chrome瀏覽器輸入 http://localhost:8088/， 能夠看到已經命中斷點 ，在Console中能夠改變變量的值，例如在這裏不返回Hello World了，改爲返回Hello Weekend，以下圖，輸入完以後按回車，能夠看到true

 

15. 看看瀏覽器獲得的就是剛纔debug時候重設的值 

 

16. 若是僅僅作到這步，WebStorm還不支援ECMAScript 6，打開 Preferences -> Languages & Franeworks -> JavaScript, 以下圖將預設的ECMAScript 5.1改成ECMAScript 6

 

 17. ES6畢竟是2015年才發佈的，形容性並很差，爲了讓您編寫的ES6的程式碼能夠有更好的相容性，能夠用Babel file watcher來監視並自動轉碼ES5.

prolinkdeMacBook-Pro:milo_demo prolink$ sudo npm install -g babel-cli

prolinkdeMacBook-Pro:milo_demo prolink$ cd /Users/prolink/WebstormProjects/milo_demo

按上一步進入工程目錄以後，安裝babel-preset-env, 參考 https://babeljs.io/docs/plugins/preset-env/

sudo npm install babel-preset-env --save-dev

18. 打開 Preferences -> Tools -> File Watchers, 添加Bable, 以下：

 

若是安裝一切順利，當您編輯JS文件時候，會自動在工程目錄中同步編譯到dist目錄中。