Come configurare Electron, Webpack, Babel, React e JSX?

Question

Ho iniziato con Electron e sto provando a configurare la mia app per utilizzare React. Sono anche nuovo di React, Webpack, Babel, NPM ... praticamente l'intero ecosistema Node.js e gli strumenti di costruzione. Ho iniziato da zero. Credo di essere abbastanza vicino, ma mi sono bloccato cercando di compilare il mio principale di file 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') 
|); 

Ecco la mia 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" 
    } 
} 

... il mio .babelrc:

{ 
    "presets": ["react"] 
} 

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

... e il file helloworld.jsx:

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

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

Che cosa sto facendo di sbagliato? Come posso avere tutto configurato correttamente?

Answer 1

È necessario aggiungere il babel-loader così webpack sa usare babel per elaborare i file

$ npm install --save-dev babel-loader 

E poi nelle vostre `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/ 
     } 
    ] 
    } 
};