当使用 chrome 调试我的 typescript 项目时,source-map 没有按预期工作。它指向编译后的js文件,而不是ts源文件。
我在 tsconfig.json 中添加了 "sourceMap": true
,并在我的 webpack.config.js 中添加了 devtools: 'inline-source-map'
。 chrome 告诉我 state.ts 的第 76 行有错误,但是 state.ts chrome 告诉我是编译后的 js 文件。这是正常行为吗?或者我错过了什么?
tsconfig.json
{
"compileOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": true,
"module": "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
}
}
webpack.config.js
var path = require('path');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var BrowserSyncPlugin = require('browser-sync-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './app/guides/identify_device/identify_device_guide.ts',
module: {
rules: [
{
test: /\.tsx?$/,
use: ['ts-loader'],
exclude: /node_modules/
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
modules: [
path.resolve('./app')
]
},
output: {
filename: 'src/bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
plugins: [
new BrowserSyncPlugin({
host: 'localhost',
port: 3000,
server: {baseDir: ['./dist/']}
}),
new HtmlWebpackPlugin({
template: './app/index.html',
})
]
};
最佳答案
最后,我用awasome-typescript-loader
代替ts-loader
解决了这个问题。
关于typescript - webpack-Typescript source-map,ts的源文件就是编译后的js文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47346252/