Electron, Webpack, Babel, React ve JSX nasıl yapılandırılır?

Question

Elektron ile çalışmaya başladım ve uygulamamı React kullanmak için kurmaya çalışıyorum. Ayrıca React, Webpack, Babel, NPM ... için hemen hemen tüm Node.js ekosistemi ve araçları inşa ediyorum. Sıfırdan başladım. Kendimi oldukça yakın olduğumu düşünüyorum, ama benim ana JSX dosyasını derlemeye çalışırken şaşırıp: Burada

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

var benim 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" 
    } 
} 

... benim .babelrc:

{ 
    "presets": ["react"] 
} 

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

... ve helloworld.jsx dosyası: Yanlış yapıyorum

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

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

? Her şeyi doğru şekilde nasıl yapılandırabilirim?

Answer 1

ekleyebilir gerek

babel-loader böylece webpack dosyalarınız `webpack.config.js içinde

$ npm install --save-dev babel-loader 

Sonra işlemek için Babel kullanmayı bilir:

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