Jak skonfigurować elektron, Webpack, Babel, React i JSX?

Question

Zaczynam z Electronem i próbuję skonfigurować moją aplikację, aby używać React. Jestem też nowy w React, Webpack, Babel, NPM ... prawie całym ekosystemie Node.js i narzędziach do kompilacji. Zacząłem od zera. Myślę, że jestem dość blisko, ale utknąłem próbuje skompilować mój główny plik 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') 
|); 

Oto mój 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" 
    } 
} 

... Moi .babelrc:

{ 
    "presets": ["react"] 
} 

... my 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' 
    }, 
}; 

... a plik helloworld.jsx:

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

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

Co robię źle? Jak mogę wszystko poprawnie skonfigurować?

Answer 1

Trzeba dodać babel-loader tak WebPack wie używać Babel przetwarzać pliki

$ npm install --save-dev babel-loader 

a potem w swoim `webpack.config.js:

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/ 
     } 
    ] 
    } 
};