Question

我是前端开发的新手。

我用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" }
        ]
    }
}

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

我们将不胜感激。

Answer 1

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

如何在使用webpack时调试tsx文件

1 个答案: