Electron、Webpack、Babel、React、JSXの設定方法は？

Question

私はElectronを使い始めています。私はReactを使うように私のアプリをセットアップしようとしています。私はReact、Webpack、Babel、NPM ... Node.jsのエコシステム全体とツールを構築するのは初めてです。私は最初から始めました。私はかなり近いと思うが、私は私のメインのJSXファイルをコンパイルしようとこだわっている：

$ webpack 
Hash: fa3346c3ff9bfd21133d 
Version: webpack 1.12.14 
Time: 41ms 
    [0] ./js/helloworld.jsx 0 bytes [built] [failed] 

ERROR in ./js/helloworld.jsx 
Module parse failed: /...path.../js/helloworld.jsx Line 5: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| 
| ReactDOM.render(
| <h1>Hello, world!</h1>, 
| document.getElementById('example') 
|); 

ここに私のpackage.jsonです：

{ 
    //... 

    "dependencies": { 
    "babel-preset-es2015": "~>6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "electron-prebuilt": "^0.36.0", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "react-photonkit": "~>0.4.1", 
    "webpack": "^1.12.14" 
    } 
} 

...私.babelrc：

{ 
    "presets": ["react"] 
} 

... webpack.config.js：

var path = require("path"); 

module.exports = { 
    entry: path.resolve(__dirname, "js/helloworld.jsx"), 
    output: { 
    path: path.resolve(__dirname, "out"), 
    publicPath: 'out/', 
    filename: 'app.js' 
    }, 
}; 

...とhelloworld.jsxファイル：

var React = require('react'); 
var ReactDOM = require('react-dom'); 

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('example') 
); 

は私が間違って何をしているのですか？すべてを正しく設定するにはどうすればよいですか？

Answer 1

あなたはbabel-loaderのでWebPACKのは、あなたのファイル、あなたの `webpack.config.jsで

$ npm install --save-dev babel-loader 

そしてを処理するためにバベルを使用することを知って追加する必要があります。

module.exports = { 
    entry: path.resolve(__dirname, "js/helloworld.jsx"), 
    output: { 
    path: path.resolve(__dirname, "out"), 
    publicPath: 'out/', 
    filename: 'app.js' 
    }, 
    module: { 
    loaders: [ 
     { 
      test: /\.jsx?$/, 
      loader: 'babel', 
      exclude: /node_modules/ 
     } 
    ] 
    } 
};