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

如何配置Electron，Webpack，Babel，React和JSX？

1 个答案: