原料:
- Visual Studio Code (后面簡稱vscode) Version 1.11.2 (1.11.2)
- vscode插件cpptool(用來支持c++的插件) Version 0.10.5
- nodejs(不知道這個就不用看本文了 2333) Version 7.9.0
- node-gyp(node插件的編譯工具) Version 3.6.0
Visual Studio Code是本人目前非常喜歡的微軟編輯器.vscode更像一個精簡的Visual Studio.并且有插件商店.非常小巧靈活的編輯器.
nodejs的c++插件開發(fā)非常的簡單.參見文檔
安裝都很簡單不會有什么問題.參見相關(guān)的文檔或者度娘就好.這里就不贅述了.
目錄結(jié)構(gòu)
- .vscode目錄是vscode編輯器的目錄一些配置都是在該目錄下.
- build目錄是編譯c++之后自動生成的目錄這里目前不用太關(guān)心它.
- node-src目錄是用來放置js文件的.因?yàn)椴寮傂枰粋€宿主來啟動的.
- src目錄放置的c++代碼.
這個項(xiàng)目我盡量弄的非常簡單大家也都會看的非常明白:
main.js主要的目的是去相對的目錄找到addon這個插件(由下面的cc編譯而來).并且運(yùn)行插件中的hello函數(shù).
//main.js 宿主程序js
const addon = require('../build/Debug/addon');
console.log(addon.hello()); //調(diào)用插件的hello函數(shù).
hello.cc會被編譯成addon.后面會詳細(xì)說明.
// hello.cc 插件程序c++
#include <node.h>
#include <iostream>
using namespace std;
namespace demo
{
using v8::FunctionCallbackInfo;
using v8::Isolate;
using v8::Local;
using v8::Object;
using v8::String;
using v8::Value;
void Method(const FunctionCallbackInfo<Value> &args)
{
Isolate *isolate = args.GetIsolate();
//這句話相當(dāng)于js里面的return. 相關(guān)見node文檔.
args.GetReturnValue().Set(String::NewFromUtf8(isolate, "world"));
int haha = 500; //這塊是為了調(diào)試清楚而寫的代碼
haha ++;
haha = 0;
cout << haha << endl;
}
void init(Local<Object> exports)
{
NODE_SET_METHOD(exports, "hello", Method);
}
NODE_MODULE(addon, init)
} // namespace demo
ok看到這里我們目錄和代碼就全部ok了.
現(xiàn)在我們講解下如何用node-gyp來生成addon這個名字的插件.
編譯hello.cc獲得addon
參見文檔文檔里有詳細(xì)的說明和所有插件編寫的內(nèi)容.我們這里就不詳細(xì)說明了.
打開控制臺.vscode自己就帶了終端的內(nèi)置.我們使用這個就好. [ctrl + `]快捷鍵就可以call出來終端.
眾所周知編譯c++需要makefile. gyp這個工具可以生成makefile.我們需要創(chuàng)建一個binding.gyp文件(實(shí)際上是一個json格式的文件).
{
"targets": [
{
"target_name": "addon", //這里就是插件的名字
"sources": [ "src/hello.cc" ] //cc文件的路徑,如果多cc需要繼續(xù)往后加.
}
]
}
有了這個gyp文件.我們就可以使用gyp命令行來編譯生成插件了.
node-gyp configure --debug
node-gyp build
為啥用debug....因?yàn)閞elease的話斷點(diǎn)就呵呵了.我們先debug.
這塊會自己build文件夾創(chuàng)建好.然后目錄也ok.最后我們會找到 addon.node文件.實(shí)際上就是個動態(tài)庫.只是后綴被改成node而已.
調(diào)試
下面來說一下vscode的調(diào)試.
cpptool插件提供了一個lauch.json文件用來調(diào)試代碼.主要就是配置這個來支持調(diào)試的功能.直接上配置.
{
"version": "0.2.0",
"configurations": [
{
"name": "C++ Launch",
"type": "cppdbg",
"request": "launch",
"program": "/usr/local/bin/node", //node vm地址
"args": ["node-src/main.js"], //宿主js地址
"stopAtEntry": false,
"cwd": "${workspaceRoot}",
"environment": [],
"externalConsole": true,
"linux": {
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
]
},
"osx": {
"MIMode": "lldb"
},
"windows": {
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
]
}
},
{
"name": "C++ Attach",
"type": "cppdbg",
"request": "attach",
"program": "${workspaceRoot}/build/Debug/addon.node", //插件地址
"processId": "${command:pickProcess}", //進(jìn)程id
"linux": {
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
]
},
"osx": {
"MIMode": "lldb"
},
"windows": {
"MIMode": "gdb",
"setupCommands": [
{
"description": "Enable pretty-printing for gdb",
"text": "-enable-pretty-printing",
"ignoreFailures": true
}
]
}
}
]
}
這個json分兩個部分.對應(yīng)vscode的兩個debug選項(xiàng).
如果你沒有這兩個選項(xiàng).需要你點(diǎn)擊 添加配置.或者 那個邊上的設(shè)置按鈕.
設(shè)置完成后就會生成如同上面所貼的json.
launch.json說明 -> C++ Launch的部分.
先看C++ Launch的部分.
由于我們開發(fā)的插件是需要node來加載運(yùn)行的.所以vm(虛擬機(jī))是node.自然是要node啟動. 然后參數(shù) 自然是我們的js代碼.
配置完成. 我們就可以F5運(yùn)行了.
運(yùn)行 C++ Launch的部分.
好了運(yùn)行的很完美. 下面我們來看最常用的 attach.
launch.json說明 -> C++ Attach的部分.
我們需要把js 稍微的修改一下.不然還沒等我們attach呢.程序就跑完了結(jié)束了.
//main.js 開個定時器.一直調(diào)用插件的hello方法.
const addon = require('../build/Debug/addon');
setInterval(
()=>{
console.log(addon.hello());
},
1000
);
我們先把node跑起來.不停的輸出World.
node node-src/main.js
這個bash我們留著. 點(diǎn)+號按鈕新建一個bash.用ps指令看一下相當(dāng)?shù)倪M(jìn)程.
5228就是這個進(jìn)程.
換成Attach方式. Lauch.json 這時候需要指向我們創(chuàng)建的插件.
processID就可以修改成 5288了. 直接F5 就可以attach上了.不過這樣有點(diǎn)麻煩.老修改json太low. 所以用pickProcess這個commond命令 就非常的方便.
不修改成5288. 而是變成${command:pickProcess} 我們直接F5運(yùn)行.
彈出的窗口會列出來所有的系統(tǒng)的進(jìn)程.我們的進(jìn)程是node所以輸入node. 會發(fā)現(xiàn)5288.點(diǎn)這個. 就ok了.
運(yùn)行的很完美.
如果過程中有問題.歡迎加入我的QQ群(20906995)討論.
同時歡迎打賞哦.~ 嘻嘻~
