基于vscode的node的ES2015(ES6)運(yùn)行環(huán)境搭建

用了vscode也有一段時(shí)間了，在輕量級(jí)的開(kāi)發(fā)環(huán)境，它的功能是最強(qiáng)的。跨平臺(tái)，不依賴Java, .net等，UI也很現(xiàn)代，運(yùn)行速度也相對(duì)比較快，占用內(nèi)存少，平板電腦的win10都可以輕松開(kāi)發(fā)。

環(huán)境說(shuō)明:

• node.js 6.9.x
• vscode 1.11.2
• 操作系統(tǒng) win10 (win7之后的系統(tǒng)，安裝方法應(yīng)該都一樣)
• 編譯插件：babel

第一步：安裝node

www.nodejs.org 下載安裝包 6.x，默認(rèn)安裝 注意：在生產(chǎn)環(huán)境，建議使用LTS，比較穩(wěn)定，bug相對(duì)比較少。 
下載后，一路默認(rèn)安裝就可以了

第二步：安裝vscode

vscode我就不介紹了，去https://code.visualstudio.com/下載對(duì)應(yīng)的安裝包就可以了，寫(xiě)這個(gè)文章的版本是1.11.2 
下載后，一路默認(rèn)安裝就可以了 
（如果是國(guó)產(chǎn)軟件，千萬(wàn)不要一路默認(rèn)安裝，如百****du，會(huì)給你默認(rèn)安裝一個(gè)全家桶,占領(lǐng)你的啟動(dòng)，瞬間讓你的電腦卡成翔）

第三步：安裝全局的babel

在命令提示符下，輸入下面命令：

npm install babel-cli babel-eslint -g
1
1

完成后，可以輸入

babel --version
1
1

可以顯示babel的版本號(hào)

第四步：用npm init創(chuàng)建工程

如果已創(chuàng)建，則跳過(guò) 
在控制臺(tái)下，建好工程目錄，如:d:\work\firstnode 
然后進(jìn)入該目錄

d: cd d:\work\firstnode ppm init
1
2
3
1
2
3

完成node的工程創(chuàng)建 
為了便于管理，我們將源代碼目錄放在lib目錄下面，或src目錄，在這里我用的是lib目錄 
編譯后可以運(yùn)行的目錄放在build目錄下面 
這樣就會(huì)有兩個(gè)目錄

d:\work\firstnode\lib d:\work\firstnode\build
1
2
1
2

第五步：安裝編譯插件

在控制臺(tái)下，目錄為d:\work\firstnode安裝插件，輸入: 
npm install –save-dev babel-preset-eslatest-node6 
第六步:編寫(xiě).babelrc

//---------------------------------------------------------- 
{
   "presets": ["eslatest-node6"],
   "plugins": [   ] 
} 
//---------------------------------------------------------------
1
2
3
4
5
6
7
1
2
3
4
5
6
7

第七步：用vscode編寫(xiě)代碼

在控制臺(tái)并在d:\work\firstnode下面，輸入code .就可以打開(kāi)當(dāng)前工程 
或者先啟動(dòng)vscode后，選擇打開(kāi)文件夾，選擇這個(gè)目錄也可以。 
在vscode的左邊的資源管理器，新建一個(gè)index.js放到lib目錄下面

//-------------index.js-------------------------------------- 
console.log("hello world"); 
//---------------------------------------------------------------
1
2
3
1
2
3

然后在控制臺(tái)下輸入命令

babel lib -d build\lib
1
1

就可以看到在build\lib目錄面，多了一個(gè)index.js

第八步：配置運(yùn)行

用vscode選擇調(diào)試，調(diào)試顯示的是沒(méi)有配置，然后進(jìn)行配置，就會(huì)進(jìn)入vscode配置lanuch.json編輯

{     
// Use IntelliSense to learn about possible Node.js debug attributes.     
// Hover to view descriptions of existing attributes.     
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
     "configurations": [
         {
             "type": "node",
             "request": "launch",
             "name": "啟動(dòng)程序",
             "program": "${workspaceRoot}\\bulid\\lib\\index.js"
         },
         {
             "type": "node",
             "request": "attach",
             "name": "附加到端口",
             "address": "localhost",
             "port": 5858 
        }
     ]
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

將program改為${workspaceRoot}\bulid\lib\index.js就可以了，然后按F5就可以運(yùn)行了。 
為了方便調(diào)試，修改package.json中的script，增加如下內(nèi)容

"scripts": {
     "build": "babel lib -d build/lib -s inline",
     "babelWatch":"babel lib/**/*.js -d build -w -s inline",
     "releaseBuild":"babel lib -d release/lib --no-comments --compact true --minified"
 },
1
2
3
4
5
1
2
3
4
5

然后在控制臺(tái)下，輸入npm run build就會(huì)執(zhí)行babel lib -d build/lib -s inline 
這樣，就完成了node的vscode環(huán)境操作

第九步：最后

• 除了配置了build，還配置了babelWatch,這樣就可以處于監(jiān)視狀態(tài)，只要lib目錄下一有文件保存，就可以實(shí)時(shí)編譯到build目錄下面。-s inline則是生成sourceMap，這樣，用vscode斷點(diǎn)調(diào)試的時(shí)候，就可以正常的代碼位置。
• 另外：這個(gè)使用的插件是babel-preset-eslatest-node6，這個(gè)插件的作用是將ES2015或更ES2017的js代碼編譯成node 6.x支持的js代碼，而不是ES5，node 6.x已經(jīng)支持99%的ES2015了，這樣編譯后的代碼變化不大。