代码
https://github.com/gzx-miller/typescript-debug-demo
背景
使用Typescript对于js开发来说能很大的提升开发效率,
不过搭建出可调试的Typescript有些麻烦.
所以这里这里说明一下具体的配置方法, 以及提供代码.
在使用以上代码前需要确保本地安装了node.js 以及typescript
npm install -g typescript
说明
将上面的github链接里的代码拉取到本地即可看到下面的一些关键文件.
在代码根目录输入命令, 将依赖的模块安装, 即可打开vscode进行调试了.
npm install
关键代码
tsconfig.json
是typescript转换成js的配置信息, 比如sourceMap表示是否生成调试映射文件.
{
"compilerOptions": {
"baseUrl": ".",
"paths": { "*": ["types/*"] },
"target": "es5",
"lib":["es2016","es2016.array.include"],
"declaration": true,
"noImplicitAny":false,
"noEmitOnError":true,
"removeComments": false,
"sourceMap": true,
"rootDir": "./src",
"outDir": "./dist",
"mapRoot": "./dist"
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts",
"./dist"
]
}
package.json
配置当前模块的环境信息
{
"name": "mongodbtest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "gulp"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-typescript": "^4.0.2",
"typescript": "^2.9.1"
},
"dependencies": {
"@types/mongodb": "^3.1.25",
"mongodb": "^3.2.3"
}
}
gulpfile.js
配置gulp命令
var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('default', function() {
return gulp.src("src/**/*.ts")
.pipe(sourcemaps.init())
.pipe(tsProject())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./dist"));
});
.vscode/launch.json
vscode的调试配置文件
{
// 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": "debug",
"program": "${workspaceFolder}\\dist\\index.js",
"preLaunchTask": "tsc: build - tsconfig.json",
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
],
"sourceMaps": true
}
]
}