ES6を使用したvscodeのjsのデバッグ
vscodeのデバッグ
vscode はデバッグに node.js を使用しますが、デフォルトでは ES6 構文をサポートしていないため、解決策は非常に簡単で、ES6 構文を変換するだけです。ES6 構文の変換には、js コンパイラーである babel を使用して ES6 構文を変換できます。
バベルとは何ですか？
Babel は、主に、現在および古いブラウザまたは環境でECMAScript 2015+ (ES6) コードを下位互換性のあるバージョンの JavaScript に変換するために使用される JavaScript コンパイラーです。
解決
バベルをインストールする
babel のインストールは非常に簡単で、npm を使用してインストールするだけです。
npm install babel-cli babel-preset-env babel-preset-es2015 -D
package.jsonを変更する
スクリプト コマンドを追加するには、package.json に次の 2 つのオプションを追加しますscripts。通常は、npm run buildpackage.json ファイルを見つけて、そこに設定されているスクリプト コマンドを実行します。
"scripts": {
"js:test": "babel src -d build -s", //babel的脚本指令
},
"babel": {
//对babel的设置
"presets": [ //要处理的语法
"es2015"
],
"sourceMaps": true, //生成映射文件.map
"retainLines": true
}
このbabel コマンドを分析してみましょう。
// src代表源文件命令
// build代表要编译文件存放目录
// -d代表编译文件存放目录不存在时自动创建
// -s代表生成.map文件，调试时需要的文件
babel src -d build -s
ターミナルで npm を介してスクリプト コマンドを実行します。
/**
*发现目录下生成一个build文件夹
*文件夹有两类文件，.js文件和.js.map文件
*.js文件为编译后文件（已经将里面的import等语法进行传化了，是vscode能运行的文件）
*.js.map文件是映射文件将编译后的.js文件和源.js文件进行关联，打断点时能调试。
*/
npm run test
vscodeを構成する
launch.json を構成する
プロジェクト ディレクトリに .vscode ファイルというファイルを作成しますlaunch.json。
注意点：
- **「プログラム」** は、実行中のプログラムのパスです。コンパイルされた .js ファイルのアドレスを記述する必要があります。デバッグ時にはソース ファイルを直接デバッグするため、ここでのファイル実行パスは作業ディレクトリと同じになります。 + パッケージ化ファイルのパス + ソースファイル名
- **「preLaunchTask」**実行するスクリプト タスクの名前は、tasks.json で構成されます。これを構成する理由は、ソース コードを変更するたびに、ES6 構文を再コンパイルして新しい .js を形成する必要があるためです。ファイルなので、コマンドラインで実行できるタスクを構成する必要があります
- **「sourceMaps」** は、マッピング ファイル (.js.map) が存在することを意味します
{
// Use IntelliSense to learn about possible 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": "es6",
//${workspaceFolder}当前工作目录,${fileBasename}当前运行文件名称
//这里必须设置文编译后的js文件，因为vscode不认ES
//测试运行文件
"program": "${workspaceFolder}/build/${fileBasename}",
// 如果存在SourceMap就使用
"sourceMaps": true,
// 调试之前要做的任务名(运行tasks.json文件里面的脚本任务)
"preLaunchTask": "jstest",
// 是否启动后自动停止程序
"stopOnEntry": false,
// 生成的代码中，如果无法映射回源代码，就自动单步执行
"smartStep": true,
//编译文件输出地址
"outFiles": [
"${workspaceFolder}/build/**"
]
}
]
}
task.json を構成する
タスクを構成します。ファイルがテストされるたびに、タスクが実行され、プロジェクト src の下のソース ファイルが再コンパイルされます。
{
"version": "2.0.0",
"tasks": [
{
"label": "jstest", // 该任务的名字，只需要增加这一条即可
"type": "npm",
"script": "js:test", //任务等价于 npm run js:test
"problemMatcher": []
}
]
}