webpack을 사용할 때 tsx 파일을 디버깅하는 방법

전 프론트 엔드 개발에 익숙합니다.webpack을 사용할 때 tsx 파일을 디버깅하는 방법

일부 reactjs 구성 요소를 tsx 형식으로 작성합니다. 이 파일은 내 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 (...) 브라우저 undefinded됩니다 같은 명령이 포함되어 있습니다.

이 문제를 해결하기 위해 webpack을 사용하기로 결정했습니다.

문제가 해결되었지만 새로운 문제가 발생했습니다.

webpack은 루트 레벨 tsx 파일을 디버깅 할 수 있기 때문에 GridStack.tsx 파일을 디버깅 할 수 없습니다.

이

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 파일을 가지고 디버그 각각 수 있어야 나의 현재 문제가되지 않습니다 :

이 내 webpack.config.js 파일입니다 tsx 파일.

귀하의 도움에 감사드립니다.

출처

2016-09-21 Ehssan Majdabadi

특수하지 않아도 ts 파일에서 디버깅합니다. 프리 로더는 사용하지 않지만 ts-loader 대신 awesome-ts-loader를 사용합니다. 그게 해결되지 않으면 우리 repo에서 더 자세히 볼 수 있습니다 – mweststrate

Thanks @mweststrate. 난 requirejs를 사용하여 내 문제를 해결했습니다. 그러나 나는 멋진 ts-loader를 사용할 것이다. ts 파일을 브라우저 친화적 인 j로 변환하는 데 사용하는 플러그인은 무엇입니까? –

같은 문제가있는 사람들을위한 답변입니다. 확장자의 순서가 중요합니다. 'tsx'를 먼저 언급 한 다음 다른 유형을 언급했습니다. compileOnSave 옵션을 true로 설정하면 각 tsx 파일에는 js 파일이 있습니다. 이 상황에서 .js 확장자가 더 일찍 올 때 Webpack은 tsx 파일 대신 js 파일을 가져옵니다.

출처

2016-10-13 11:28:54

webpack을 사용할 때 tsx 파일을 디버깅하는 방법

답변

관련 문제