詳解使用vscode+es6寫nodejs服務端調(diào)試配置

更新時間：2017年09月21日 11:31:33 作者：sky0014

本篇文章主要介紹了使用vscode+es6寫nodejs服務端調(diào)試配置，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前端的小伙伴們在babel等的加持下，已經(jīng)可以愉快的使用es6來寫代碼了。

然后對于服務端的nodejs就有點坑爹了，雖然原生支持了es6，但是只是部分支持，一些不支持的特性（比如module）使用了就會報錯，所以如果想使用完整的es6來寫服務端nodejs，我們還是離不開babel。

下面介紹一下在vscode中使用es6寫nodejs的配置方法。

1.首先在根目錄下建立.babelrc文件，寫入babel配置，我的配置如下，記得npm安裝babel及你需要的presets或者plugin。

{
 "presets": [
 "es2015",
 "stage-3"
 ]
}

2.其實此時已經(jīng)可以通過babel-node來執(zhí)行你的es6代碼了。

babel-node src/index.js

然而這樣的話，vscode里面是無法調(diào)試的。所以我們得換個思路，首先將源碼使用babel轉(zhuǎn)換，然后執(zhí)行轉(zhuǎn)換后的代碼，附加一份sourcemap就好了。

3.package.json中增加build命令，使用babel轉(zhuǎn)換es6代碼。

 "scripts": {
 ......
 "build": "babel src -d dist --source-maps"
 }

4.創(chuàng)建一個npm task（vscode概念），用來執(zhí)行npm run build

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "0.1.0",
 "command": "npm", //執(zhí)行npm命令
 "isShellCommand": true,
 "showOutput": "always",
 "suppressTaskName": true,
 "tasks": [
 {
  "taskName": "build", //task名稱
  "args": [ //npm run build
  "run",
  "build"
  ],
  "isBuildCommand": true
 }
 ]
}

該文件在根目錄.vscode目錄下，名字是tasks.json，如果沒有可以自己創(chuàng)建一個。

5.在vscode的調(diào)試配置文件中(.vscode -> launch.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}\\src\\index.js",
  "sourceMaps": true, //sourcemap打開
  "outFiles": [
  "${workspaceRoot}\\dist\\index.js"
  ], //源映射，指定實際執(zhí)行文件
  "preLaunchTask": "build" //首先執(zhí)行build task
 },
 {
  "type": "node",
  "request": "attach",
  "name": "附加到端口",
  "address": "localhost",
  "port": 5858
 }
 ]
}

主要干了這幾件事：