基于vscode的node的ES2015(ES6)運行環境搭建
用了vscode也有一段時間了，在輕量級的開發環境，它的功能是最強的。跨平臺，不依賴Java, .net等，UI也很現代，運行速度也相對比較快，占用內存少，平板電腦的win10都可以輕松開發。
環境說明:
- node.js 6.9.x
- vscode 1.11.2
- 操作系統 win10 (win7之后的系統，安裝方法應該都一樣)
- 編譯插件：babel
第一步：安裝node
www.nodejs.org 下載安裝包 6.x，默認安裝 注意：在生產環境，建議使用LTS，比較穩定，bug相對比較少。
下載后，一路默認安裝就可以了
第二步：安裝vscode
vscode我就不介紹了，去https://code.visualstudio.com/下載對應的安裝包就可以了，寫這個文章的版本是1.11.2
下載后，一路默認安裝就可以了
（如果是國產軟件，千萬不要一路默認安裝，如百****du，會給你默認安裝一個全家桶,占領你的啟動，瞬間讓你的電腦卡成翔）
第三步：安裝全局的babel
在命令提示符下，輸入下面命令：
npm install babel-cli babel-eslint -g
完成后，可以輸入
babel --version
可以顯示babel的版本號
第四步：用npm init創建工程
如果已創建，則跳過
在控制臺下，建好工程目錄，如:d:\work\firstnode
然后進入該目錄
d: cd d:\work\firstnode ppm init
完成node的工程創建
為了便于管理，我們將源代碼目錄放在lib目錄下面，或src目錄，在這里我用的是lib目錄
編譯后可以運行的目錄放在build目錄下面
這樣就會有兩個目錄
d:\work\firstnode\lib d:\work\firstnode\build
第五步：安裝編譯插件
在控制臺下，目錄為d:\work\firstnode安裝插件，輸入:
npm install –save-dev babel-preset-eslatest-node6
第六步:編寫.babelrc
//----------------------------------------------------------
{
"presets": ["eslatest-node6"],
"plugins": [ ]
}
//---------------------------------------------------------------
第七步：用vscode編寫代碼
在控制臺并在d:\work\firstnode下面，輸入code .就可以打開當前工程
或者先啟動vscode后，選擇打開文件夾，選擇這個目錄也可以。
在vscode的左邊的資源管理器，新建一個index.js放到lib目錄下面
//-------------index.js--------------------------------------
console.log("hello world");
//---------------------------------------------------------------
然后在控制臺下輸入命令
babel lib -d build\lib
就可以看到在build\lib目錄面，多了一個index.js
第八步：配置運行
用vscode選擇調試，調試顯示的是沒有配置，然后進行配置，就會進入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": "啟動程序",
"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就可以運行了。
為了方便調試，修改package.json中的script，增加如下內容
"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"
},
然后在控制臺下，輸入npm run build就會執行babel lib -d build/lib -s inline
這樣，就完成了node的vscode環境操作
第九步：最后
- 除了配置了build，還配置了babelWatch,這樣就可以處于監視狀態，只要lib目錄下一有文件保存，就可以實時編譯到build目錄下面。-s inline則是生成sourceMap，這樣，用vscode斷點調試的時候，就可以正常的代碼位置。
- 另外：這個使用的插件是babel-preset-eslatest-node6，這個插件的作用是將ES2015或更ES2017的js代碼編譯成node 6.x支持的js代碼，而不是ES5，node 6.x已經支持99%的ES2015了，這樣編譯后的代碼變化不大。