Cách định cấu hình Electron, Webpack, Babel, React và JSX?

Question

Tôi đang bắt đầu với Electron và tôi đang cố thiết lập ứng dụng của mình để sử dụng React. Tôi cũng mới sử dụng React, Webpack, Babel, NPM ... khá nhiều trong toàn bộ hệ sinh thái Node.js và các công cụ xây dựng. Tôi bắt đầu từ đầu. Tôi nghĩ rằng tôi khá chặt chẽ, nhưng tôi bị mắc kẹt cố gắng để biên dịch chính tập tin JSX tôi:

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

Dưới đây là tôi 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" 
    } 
} 

... tôi .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' 
    }, 
}; 

... và helloworld.jsx file:

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

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

Tôi đang làm gì sai? Làm thế nào tôi có thể nhận được tất cả mọi thứ cấu hình chính xác?

Answer 1

Bạn cần phải thêm babel-loader để webpack biết sử dụng babel để xử lý tập tin của bạn

$ npm install --save-dev babel-loader 

Và rồi trong `webpack.config.js của bạn:

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