快捷導(dǎo)航

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

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

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

前端的小伙伴們?cè)赽abel等的加持下，已經(jīng)可以愉快的使用es6來(lái)寫(xiě)代碼了。

然后對(duì)于服務(wù)端的nodejs就有點(diǎn)坑爹了，雖然原生支持了es6，但是只是部分支持，一些不支持的特性（比如module）使用了就會(huì)報(bào)錯(cuò)，所以如果想使用完整的es6來(lái)寫(xiě)服務(wù)端nodejs，我們還是離不開(kāi)babel。

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

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

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

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

babel-node src/index.js

然而這樣的話，vscode里面是無(wú)法調(diào)試的。所以我們得換個(gè)思路，首先將源碼使用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)建一個(gè)npm task（vscode概念），用來(lái)執(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，如果沒(méi)有可以自己創(chuàng)建一個(gè)。

5.在vscode的調(diào)試配置文件中(.vscode -> launch.json)，進(jìn)行如下配置

{
 // 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}\\src\\index.js",
  "sourceMaps": true, //sourcemap打開(kāi)
  "outFiles": [
  "${workspaceRoot}\\dist\\index.js"
  ], //源映射，指定實(shí)際執(zhí)行文件
  "preLaunchTask": "build" //首先執(zhí)行build task
 },
 {
  "type": "node",
  "request": "attach",
  "name": "附加到端口",
  "address": "localhost",
  "port": 5858
 }
 ]
}

主要干了這幾件事：