我正在尝试使用VS Code调试React Typescript应用程序,但我不知道如何配置launch.json才能使TSX调试正常工作。
我正在使用webpack将所有内容捆绑到一个js文件中
这是我的package.json
{
"name": "reactts",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"magic": "webpack"
},
"author": "",
"license": "ISC",
"dependencies": {
"@types/react": "^16.7.20",
"@types/react-dom": "^16.0.11",
"axios": "^0.18.0",
"react": "^16.7.0",
"react-dom": "^16.7.0",
"ts-loader": "^5.3.3",
"typescript": "^3.2.4"
}
}
这是我的tsconfig.json文件
{
"compilerOptions": {
"target": "es6",
"jsx": "react",
"module": "commonjs"
},
"exclude": [
"node_modules"
]
}
这是我的webpack.config.js文件
var path = require("path");
var config = {
entry: ["./src/app.tsx"],
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
},
resolve: {
extensions: [".ts", ".tsx", ".js"]
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/
}
]
}
};
module.exports = config;
我使用npm run magic将tsx代码编译到捆绑的js文件中
答案 0 :(得分:0)
我不使用webpack ,而仅使用react create-app(npm start
= react-scripts start
)提供的脚本,然后我使用Chrome Debugger
启动VS Code调试配置:
直接指向app.tsx和index.ts所在的应用程序的源/ src。
反应-v 16.8.6 节点-v 10.16.0
{
"type": "chrome",
"request": "launch",
"name": "Debug React Run",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/src"
}
如果找不到适合Webpack的解决方案,我将进行更新。