webpack - 如何配置 Electron、Webpack、Babel、React 和 JSX？

Question

我正在开始使用 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')
);

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

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