如何配置 Electron、Webpack、Babel、React 和 JSX？答案

【问题标题】：How to configure Electron, Webpack, Babel, React, and JSX?如何配置 Electron、Webpack、Babel、React 和 JSX？
【发布时间】：2016-06-14 06:18:53
【问题描述】：

我开始使用 Electron，我正在尝试设置我的应用程序以使用 React。我也是 React、Webpack、Babel、NPM 的新手……几乎是整个 Node.js 生态系统和构建工具。我从头开始。我想我已经很接近了，但我一直在尝试编译我的主 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')
| );

这是我的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"
  }
}

...我的.babelrc:

{
  "presets": ["react"]
}

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

...和helloworld.jsx 文件：

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

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

我做错了什么？如何正确配置所有内容？

【问题讨论】：

你的代码是开源的吗？我也一直在尝试将 React 和 .jsx 文件与 Electron 一起使用，这相当困难。

标签： reactjs webpack babeljs react-jsx electron

【解决方案1】：

你需要添加 babel-loader 以便 webpack 知道使用 babel 来处理你的文件

$ npm install --save-dev babel-loader

然后在你的`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/
        }
    ]
  }
};

【讨论】：