使用 webpack ts-loader 时打字稿源不显示

Question

我正在使用来自 grunt 任务的 webpack 和 ts-loader 来转换 Typescript 并生成用于调试生产的源映射。我的团队希望能够看到原始 Typescript 源代码，而不仅仅是 JavaScript 源代码。我仔细研究了多页文档和许多问题/答案，寻找正确的解决方案，但到目前为止我在浏览器中看不到 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 工具。我仍然只能在开发工具窗口中看到 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 中的任何专家都可以提供帮助吗？在此先感谢您的帮助！

Answer 1

您需要使用源映射加载器。这里介绍了这一点：

你的 webpack 配置应该是这样的：

module: {
    loaders: [
        // All files with a '.ts' or '.tsx' extension will be handled by 'ts-loader'.
        { test: /\.tsx?$/, loader: "ts-loader" }
    ],

    preLoaders: [
        // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
        { test: /\.js$/, loader: "source-map-loader" }
    ]
},