使用 webpack 时如何调试 tsx 文件答案

【问题标题】：How to debug tsx files when using webpack使用 webpack 时如何调试 tsx 文件
【发布时间】：2016-09-21 07:27:39
【问题描述】：

我是前端开发的新手。

我写了一些 tsx 格式的 reactjs 组件。这是我的 tsx 文件之一：

import * as React from "react";
import {observer} from "mobx-react";
import {observable} from "mobx";
import {TileGrid, Tile} from "./GridStack"




@observer
export class Dashboard extends React.Component<any, any>{

    addTiles() {

        this.props.data.push(
            {title: "I'm a !"}
        );
    }

    render() {
        return (
            <div>
                <h1>I'm dashboard !</h1>
                <button onClick={this.addTiles.bind(this)}>Add some tiles</button>
                <TileGrid columnCount="12">
                    {this.props.data.map((x) => {
                        return (
                            <Tile x="1" minWidth="2" minHeight="3">
                                {x.title}
                            </Tile>
                        )
                    })}
                </TileGrid>
            </div>
        )
    }
}

如您所见，它具有节点模块格式。它依赖于 GridStack 模块。

这是我的 tsconfig.json 文件：

{
    "compileOnSave": true,
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "module": "commonjs",
        "declaration": false,
        "noImplicitAny": false,
        "removeComments": true,
        "experimentalDecorators": true,
        "noLib": false,
        "jsx": "react"

    },
    "exclude": [
        "node_modules",
        "static"
    ]
}

输出的 js 文件包含诸如 reuqire(...) 之类的命令，这些命令对于浏览器是未定义的。

为了解决这个问题，我决定使用 webpack 。

它解决了这个问题，但现在我遇到了一个新问题。

我无法调试 GridStack.tsx 文件，因为 webpack 只允许我调试根级 tsx 文件。

这是我的 webpack.config.js 文件：

module.exports = {
    entry: './TS/controllers/App.tsx',
    output: {
        filename: './dist/app.js'
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['', '.Webpack.js', '.web.js', '.ts', '.js', '.tsx']
    },
    module: {
        loaders: [
                {
                    test: /\.tsx?$/,
                    exclude: /(node_modules|bower_components)/,
                    loader: 'ts-loader'
                }
        ],
        preLoaders: [
                // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
                { test: /\.tsx$/, loader: "source-map-loader" }
        ]
    }
}

打包和打包不是我当前的问题，我只需要 浏览器友好 并且能够调试每个 tsx 文件的 js 文件。

您的帮助将不胜感激。

【问题讨论】：

我们在 ts 文件上进行调试，不需要做任何特别的事情。我们不使用预加载器，但我们使用 awesome-ts-loader 而不是 ts-loader。如果这不能解决问题，我可以深入了解我们的回购
谢谢@mweststrate。我已经通过使用 requirejs 解决了我的问题。但我会使用 awesome-ts-loader。您使用哪个插件将 ts 文件转换为浏览器友好的 js ？

标签： debugging reactjs typescript webpack tsc

【解决方案1】：

有同样问题的人的答案。扩展的顺序很重要。我首先提到了“tsx”，然后是其他类型。当 compileOnSave 选项设置为 true 时，每个 tsx 文件都会有一个对应的 js 文件。在这种情况下，当 .js 扩展名较早时，Webpack 会抓取 js 文件而不是 tsx 文件。

【讨论】：