web-dev-qa-db-ja.com

ソースマップとWebパックを使用したTypeScriptのデバッグ

TypeScriptで書かれたプロジェクトがあり、それをデバッグできるようにしたい（Chrome Dev ToolsまたはIntellijのいずれか）。

最初、TypeScriptのimport機能がサポートされていないことがわかりました。そこで、webpack dev serverとともにWebpackを使用しようとしましたが、これは完全に失敗しました。アプリケーションが動作していても（すべてのコードを含む単一のbundle.jsファイルがあるため）、指定されたソースマップとコードを一致させることができず、デバッグが不可能になります。

Webpackの使用を停止した後、require.jsエラーを解決するために、依存関係としてrequire is not definedを追加しようとしました。それはうまくいきましたが、今私は再び立ち往生し、これを取得しています：

キャッチされないReferenceError：エクスポートは定義されていません

なぜこれが機能しないのかわかりません。アプリケーションを（webpackを介して、またはトランスコンパイル後にインポートステートメントを解決できるように）動作させ、TypeScriptで作成されたソースマップを使用してコードをデバッグできるようにします。どうすればこれを達成できますか？

何かが足りない場合に備えて、設定ファイルを添付しています。

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "sourceMap": true
  },
  "include": [
    "scripts/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

webpack.config.js：

module.exports = {
    resolve: {
        extensions: [/*'.ts', '.tsx', */'.js']
    },
    entry: './scripts/main.js',
    output: {
        path: '/',
        filename: 'app.js'
    },
    module: {
        rules: [
            { test: /\.js$/, loader: 'source-map-loader', enforce: 'pre' }
        ],
        loaders: [
            { test: /\.tsx?$/, loader: 'ts-loader', exclude: /node_modules/ },
            {test: /\.css$/, loader: "style!css"}
        ]
    },
    watch: true
};
debuggingtypescriptintellij-ideawebpacksource-maps
28
Konstantine

Webpackでデバッグを有効にするには、devtool: "source-map"をwebpack.config.jsに追加します。

require.jsを使用してファイルをロードするには、"module": "AMD"のtsconfig.jsonを変更します。 require.jsは、commonjsモジュールのロードをサポートしていません。

19
Saravana