0
フロントエンド開発の初心者です。webpackを使用しているときにtsxファイルをデバッグする方法
いくつかのreactjsコンポーネントをtsx形式で記述します。これは私のtsxファイルの1つです：
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ファイルはブラウザのundefindedさreuqire（...）のようなコマンドが含まれています。
この問題を解決するには、webpackを使用することにしました。
この問題は修正されましたが、今は新しい問題に直面しました。
webpackはルートレベルのtsxファイルをデバッグできるので、GridStack.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ファイル。
あなたのご協力をお待ちしております。
特別な処理を行うことなく、tsファイルをデバッグします。プリローダーは使用しませんが、ts-loaderの代わりにawesome-ts-loaderを使用します。それで解決できない場合は、私たちのレポをより深く見ることができます – mweststrate
ありがとう@mweststrate。私はrequirejsを使用して私の問題を解決しました。しかし、私はawesome-ts-loaderを使用します。どのプラグインを使ってtsファイルをブラウザフレンドリなjsに変換しますか？ –