Wie konfiguriere ich Electron, Webpack, Babel, React und JSX?

Question

Ich beginne mit Electron und ich versuche, meine App einzurichten, um React zu verwenden. Ich bin auch neu in React, Webpack, Babel, NPM ... so ziemlich das gesamte Node.js-Ökosystem und Build-Tools. Ich habe von vorne angefangen. Ich glaube, ich ziemlich nah dran bin, aber ich bin fest versucht, meine Haupt JSX-Datei zu kompilieren:

$ 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') 
|); 

Hier ist mein 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" 
    } 
} 

... mein .babelrc:

{ 
    "presets": ["react"] 
} 

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

... und die helloworld.jsx Datei:

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

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

Was mache ich falsch? Wie kann ich alles richtig konfiguriert bekommen?

Answer 1

Sie müssen hinzufügen babel-loader so weiß webpack babel zu verwenden, um Ihre Dateien

$ npm install --save-dev babel-loader 

Und dann in Ihrem `webpack.config.js zu verarbeiten:

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