React babel 需要配置

Question

我正在尝试设置 Spring 使用 React 和 Thymeleaf 的项目。我还添加了 requirejs，我正在尝试运行一切。我设法运行使用

的一切

React.createClass

现在我正在尝试更多 'react' 方式，例如使用 JSX

<CommentForm />

并且 React 组件是这样写的：

class CommentForm extends React.Component {
    render() {
        ...
    }
}

我知道要让它工作，我需要设置 babel 库，但我不知道如何才能正确地做到这一点。我在 google 中阅读了很多文章，但所有文章都是针对 node.js 或 webpack 设置的（这也是某种服务器，对吗？）

你知道我应该用什么来正确配置它吗？包括一切？如果您需要我的任何文件，请告诉我，然后我会在此处放一些代码。

Answer 1

最后，根据用户 azium 的评论，我已经设法做到这一点。所以我有一个结构：

js / 
       components
           comment/
               comment-box.js
       node_modules/
       lib/
       app.js
       webpack.config.jsx
       package.json

这里是 webpack.config.jsx:

'use strict';
import path from 'path';

module.exports =  {
    entry: './app.js',
    devtool: 'sourcemaps',
    cache: true,
    debug: true,
    output: {
        path: __dirname,
        filename: './built/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel'
            }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx']
        }
    }
};

这是我的 package.json:

{
  "name": "app",
  "version": "0.1.0",
  "description": "app",
  "dependencies": {
    "babel-cli": "^6.3.17",
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-3": "^6.3.13",
    "react": "^0.14.5",
    "react-dom": "^0.14.5",
    "rest": "^1.3.1",
    "webpack": "^1.12.2"
  },
  "babel": {
    "presets": [
      "react",
      "es2015",
      "stage-3"
    ]
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "babel-loader": "^6.2.0"
  }
}

这是一个示例组件：

'use strict';
import React from 'react';
import CommentList from './commentList';
import CommentForm from './commentForm';
import client from './../../lib/client';
class CommentBox extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
        handleCommentSubmit(comment)
        {
            var comments = this.state.data;
            comments.push(comment);
            this.setState({data: comments}, function () {
                $.ajax({
                    url: this.props.url,
                    dataType: 'json',
                    type: 'POST',
                    data: comment,
                    success: function (data) {
                        this.setState({data: data});
                    }.bind(this),
                    error: function (xhr, status, err) {
                        console.error(this.props.url, status, err.toString());
                    }.bind(this)
                });
            });
        }

        getCommentsFromServer()
        {
            client({method: 'GET', path: this.props.url}).done(response => {
                this.setState({data: response.entity._embedded.comments});
            });
        }
        componentDidMount()
        {
            this.getCommentsFromServer();
        }
        render()
        {
            return (
                <div className="commentBox">
                    <h1>Comments</h1>
                    <CommentList data={this.state.data}/>
                    <CommentForm onCommentSubmit={this.handleCommentSubmit}/>
                </div>
            );
        }
    }

    export default CommentBox;

React babel 需要配置

React babel and require configuration

javascript

requirejs

reactjs

babeljs