予期しないトークン<：Typescript、ReactでWebpack構成の問題

Question

誰でも問題を解決できますか？ 私は、活字体でプロジェクトを開始しまし反応しWebPACKのとhttps://www.typescriptlang.org/docs/handbook/react-&-webpack.html

からの助けは、私はすべてを設定し、私はエラーに

ERROR in ./app/index.tsx 
Module parse failed: app/index.tsx Unexpected token (10:4) 
You may need an appropriate loader to handle this file type. 
| 
| ReactDOM.render(
|  <Hello compiler="TypeScript" framework = "React" />, 
|  document.getElementById("example") 
|); 

を取得していますコマンドのWebPACKを実行しようとすると、私は同様の構成と同じソースを持っていますファイルを記述します。

Webpack.config.js

const path = require('path'); 
module.exports = { 
entry: path.join(__dirname, "/app/index.tsx"), 
output: { 
    filename: "bundle.js", 
    path: path.join(__dirname, "/dist") 
}, 

// Enable sourcemaps for debugging webpack's output. 
devtool: "source-map", 

resolve: { 
    // Add '.ts' and '.tsx' as resolvable extensions. 
    extensions: [ ".webpack.js", ".web.js", ".ts", ".tsx", ".js" ] 
}, 

module: { 
    loaders: [ 
     // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
     { 
      test: /\.tsx?$/, 
      include: path.join(__dirname, '/app'), 
      loaders: [ "babel-loader", "awesome-typescript-loader"], 
      query: { 
       presets: [ "react", "es2015" ] 
      } 
     } 
    ], 

    rules: [ 
     // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
     { 
      test: /\.js$/, 
      include: path.join(__dirname, '/app'), 
      loader: "source-map-loader"} 
    ] 
}, 

// When importing a module whose path matches one of the following, just 
// assume a corresponding global variable exists and use that instead. 
// This is important because it allows us to avoid bundling all of our 
// dependencies, which allows browsers to cache those libraries between builds. 
externals: { 
    "react": "React", 
    "react-dom": "ReactDOM" 
} 

}。

index.tsx

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import {Hello} from "./components/Hello"; 

ReactDOM.render(
    <Hello compiler="TypeScript" framework = "React" />, 
    document.getElementById("example") 
); 

Answer 1

私はtypescriptですローダーなしで何とか

const path = require('path'); 
module.exports = { 
    entry: path.join(__dirname, "/app/index.tsx"), 
    output: { 
     filename: "bundle.js", 
     path: path.join(__dirname, "/dist") 
    }, 

    // Enable sourcemaps for debugging webpack's output. 
    devtool: "source-map", 

    resolve: { 
     // Add '.ts' and '.tsx' as resolvable extensions. 
     extensions: [ ".webpack.js", ".web.js", ".ts", ".tsx", ".js" ] 
    }, 

    module: { 
     rules: [ { 
      test: /\.tsx$/, 

      use: [ 
       // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
       { 
        loader: "babel-loader" 
       } 
      ] 
     }, { 
      test: /\.js$/, 
      use: [ 
       { 
        loader: "source-map-loader" 
       } 
      ] 
     } 
     ] 
    }, 

    // When importing a module whose path matches one of the following, just 
    // assume a corresponding global variable exists and use that instead. 
    // This is important because it allows us to avoid bundling all of our 
    // dependencies, which allows browsers to cache those libraries between builds. 
    externals: { 
     "react": "React", 
     "react-dom": "ReactDOM" 
    } 
}; 

そして、その作業にWebPACKの設定を変更する必要がありました。

Answer 2

私は、これは直接あなたの質問に答えていないが、それはあなたの問題を解決する別の方法を与えたかもしれません知っています。

私は自分自身を反応させてウェブパックするのは新しいですが、私のセットアップでは、typescriptを使用してTSXファイルを作成し、その後、webpackをtranspiled jsファイルにポイントします。このアプローチには2段階のビルドプロセスを実行しなければならないという複雑さを除いて、何らかの欠点があるかどうかはわかりませんが、これまでのところ私にとっては十分に機能しています。このアプローチを使用して、私のWebPACKの設定ファイルは次のようになります。

module.exports = { 
    devtool: "inline-source-map", 
    entry: './wwwroot/app/components/root.js', 
    output: { 
    filename: 'bundle.js', 
    path: "./wwwroot/js/" 
    }, 
    module: { 
    rules: [ 
    { 
     enforce: 'pre', 
     test: /\.js$/, 
     loader: "source-map-loader" 
    } 
    ] 
    } 
};