我正在使用grunt任务中的webpack和ts-loader来转换Typescript并生成源映射以用于生产调试。我的团队希望能够看到原始的Typescript源代码,而不仅仅是JavaScript源代码。我查阅了许多文档和问题/答案,寻找正确的解决方案,但到目前为止,我无法在浏览器中看到Typescript文件,只能看到JavaScript版本。
我们的项目根模块或webpack任务的“入口”
我已经配置了一个名为“prod”的webpack任务:
我们的项目根模块或webpack任务的“入口”
webpackEntry
是一个JavaScript文件,它需要JavaScript文件,其中一些是从TypeScript编译而来,但有些是手动创建的。我已经配置了一个名为“prod”的webpack任务:
webpack: {
options: {
entry: webpackEntry,
output: {
path: webpackDest,
filename: 'app-min.js',
libraryTarget: "assign",
pathInfo: true
},
externals: grunt.file.readJSON('app-ui/webpack-externals.json'),
progress: true
},
prod: {
devtool: 'source-map',
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.SourceMapDevToolPlugin({
test: /\.tsx?$/,
exclude: 'node_modules',
module: true,
filename: '[file].map',
append: false
})
],
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js','.jsx']
},
module: {
loaders: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' }
]
},
ts: {
// configures the ts compiler:
"compilerOptions": {
"target": "es5",
"sourceMap": true,
"jsx": "react",
"experimentalDecorators": true
},
"exclude": [
"node_modules" // add other exclusions for the ts compiler.
]
}
}...
还有一个tsconfig.json文件:
{
"compilerOptions": {
"target": "es5",
"sourceMap": true
},
"exclude": [
"node_modules"
]
}
...但是我在Chrome Dev Tools源代码中只看到JavaScript源文件。 我想能够看到原始的JavaScript源文件和原始的TypeScript文件,但不是被转换过的JavaScript文件。
更新: 我遵循@basarat下面的建议并添加了source-map-loader工具。 但是我在dev-tools窗口中仍然只看到JavaScript文件。
相关节选:
module: {
loaders: [
// all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
{ test: /\.tsx?$/, loader: 'ts-loader', exclude: 'node_modules' }
],
preLoaders: [
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{ test: /\.js$/, loader: "source-map-loader", exclude: ['node_modules', 'ext-*', 'lib', 'tools'] }
]
}, ...
有没有熟悉ts-loader的专家可以提供帮助?非常感谢您的帮助!