私は grunt タスクから webpack と ts-loader を使用して Typescript をトランスパイルし、プロダクションのデバッグに使用するソースマップを生成しています。私のチームは、JavaScript ソースだけでなく、元の Typescript ソースも表示できるようにしたいと考えています。ドキュメントの多くのページと多くの質問/回答を調べて、適切な解決策を探しましたが、これまでのところ、ブラウザーに Typescript ファイルが表示されず、JavaScript バージョンのみが表示されます。
私たちのプロジェクト ルート モジュール、または webpack タスクの「エントリ」でwebpackEntryある は、JavaScript ファイルを必要とする JavaScript ファイルであり、その一部は TypeScript からコンパイルされたものですが、手動で作成されたものもあります。
このように構成されたwebpack「prod」タスクがあります：
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 の専門家はいますか? よろしくお願いします。