当使用webpack的ts-loader时，Typescript源代码未显示。

Question

我正在使用grunt任务中的webpack和ts-loader来转换Typescript并生成源映射以用于生产调试。我的团队希望能够看到原始的Typescript源代码，而不仅仅是JavaScript源代码。我查阅了许多文档和问题/答案，寻找正确的解决方案，但到目前为止，我无法在浏览器中看到Typescript文件，只能看到JavaScript版本。

我们的项目根模块或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的专家可以提供帮助？非常感谢您的帮助！

- GLaDOS

Answer 1

你需要使用sourcemap loader。这里有相关内容：

你的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" }
    ]
},

- basarat

---

谢谢@basarat，我尝试了你的建议。但是结果仍然和之前一样：在浏览器开发工具窗口中只显示JavaScript文件.. :( - GLaDOS

面掌 - 我一直没有在JavaScript目录上运行“clean”任务。 - GLaDOS

所以，事实证明 ts-loader 无法编译我们的 TypeScript，因为 ts 目录与 js 目录完全分离。js 目录包含入口文件，并且需要尚未转译的 JavaScript 文件，因为它们还不存在。 - GLaDOS

source-map-loader 对我很有用。也许你可以从这个仓库得到一些帮助：https://github.com/AngularClass/angular2-webpack-starter/blob/master/config/webpack.common.js - apreg

Answer 2

您可以像下面这样将devTools值提供给sourcemap，添加到您的webpack配置中：

module.exports = {
    entry:'./app/app',
    output:{
        filename:'bundle.js',
    },
    resolve:{
        extensions:['','.ts','.js'],
        modulesDirectories: ['node_modules']
    },
    module:{
        loaders:[
            {
                test: /\.ts$/, loader: 'ts-loader'
            }
        ]
    },
    devtool: "sourcemap" /*<=================*/
}

微软的指南在这里: https://github.com/Microsoft/TypeScript-Handbook/blob/master/pages/tutorials/React%20%26%20Webpack.md

- Vicky