詳解使用vscode+es6寫nodejs服務(wù)端調(diào)試配置
前端的小伙伴們在babel等的加持下，已經(jīng)可以愉快的使用es6來寫代碼了。
然后對于服務(wù)端的nodejs就有點坑爹了，雖然原生支持了es6，但是只是部分支持，一些不支持的特性（比如module）使用了就會報錯，所以如果想使用完整的es6來寫服務(wù)端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)，進(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": "啟動程序",
"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
}
]
}
主要干了這幾件事：
- 開啟source-map，以便追蹤到es6源碼
- 運行前先執(zhí)行build，編譯es6源碼
- 執(zhí)行和調(diào)試編譯后的代碼
OK，現(xiàn)在我們就可以愉快的在vscode里用es6寫nodejs了，撒花~
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Koa2中間件的作用及路由實現(xiàn)實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
用node擼一個監(jiān)測復(fù)聯(lián)4開售短信提醒的實現(xiàn)代碼
這篇文章主要介紹了用node擼一個監(jiān)測復(fù)聯(lián)4開售短信提醒的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
最近工作中需要對身份證號的年齡、出生日期與性別進(jìn)行驗證，所以這篇文章主要介紹了Node.js通過身份證號驗證年齡、出生日期與性別的方法，在介紹完node.js的實現(xiàn)方法后又給大家分類的利用JS實現(xiàn)的方法，需要的朋友可以參考下。2017-03-03
用Nodejs實現(xiàn)在終端中炒股的實現(xiàn)
這篇文章主要介紹了用Nodejs實現(xiàn)在終端中炒股的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
在本篇文章里小編給大家整理的是關(guān)于nodejs腳本centos開機(jī)啟動實操方法，有興趣的朋友們參考下。2020-03-03
JSONP是一個跨域解決方案,本文主要介紹了Node.js使用JSONP接口的具體用法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-03-03
在軟件開發(fā)中,命令行界面（CLI）工具是必不可少的助手,本文主要介紹了如何使用Node.js構(gòu)建一個靈活的CLI工具,涵蓋從基礎(chǔ)命令處理到復(fù)雜的交互式問答和遠(yuǎn)程模板下載,需要的可以參考下2024-03-03
本文介紹在Windows上安裝NVM并配置Node.js路徑和鏡像源,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
這篇文章詳細(xì)介紹了如何使用node進(jìn)程管理工具pm2，文中代碼示例講解的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友可以借鑒一下2023-04-04
這篇文章主要為大家詳細(xì)介紹了node+socket實現(xiàn)簡易聊天室功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07