node.js - 使用 Webpack 和 JSX 导入 React 无法识别

Question

我有点困惑，因为我的类(class)为 React 分配了三个单独的指南，而且它们的做法都不同。我还不清楚我们正在做的哪些元素是 Webpack，哪些是 ES6，哪些是 Node，所以如果我描述得很糟糕，请原谅我。

我有以下package.json ，跳过不必要的字段:

{
    "dependencies": {
        "react": "^0.14.7",
        "react-dom": "^0.14.7",
        "webpack": "^1.12.13"
    },
    "devDependencies": {
        "babel-core": "^6.4.5",
        "babel-loader": "^6.2.2",
        "babel-preset-es2015": "^6.3.13",
        "jshint": "^2.9.1",
        "jshint-loader": "^0.8.3",
        "node-libs-browser": "^1.0.0"
    }
}

我跑npm install .

现在我有了这个 Webpack 配置:

"use strict";
let webpack = require('webpack');

module.exports = {
    entry: ["./main.es6"],
    output: {
        filename: "compiled.js"
    },
    module: {
        loaders: [
            {
                test: /\.es6$/g,
                exclude: /node_modules/,
                loader: 'babel-loader'
            }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.es6']
    },
    watch: true
};

据我了解，它只是运行 main.es6以及它需要/引用/通过 Babel 加载器导入的任何文件。我确实有一个.babelrc文件设置完毕，我可以确认它确实有效(将箭头函数、类等内容转换为 ES5)。

现在这是棘手的部分。我的页面将是一张彩票抽奖表；我的 React 组件是一行，它传递六个数字的数组并将其附加到现有表中。

import React from 'react';
import ReactDOM from 'react-dom';

const Drawing = props => (
 <tr>
     {props.numbers.map(n => <td>{n}</td>)}
 </tr>
);

ReactDOM.render(<Drawing />, document.getElementsByTagName("table")[0]);

这让我在 <tr> 的时刻出现 SyntaxError 异常。被写。这让我很困惑，因为在我看来，如果 React 导入成功(显然是这样)，那么 JSX 就应该被理解。 'props的箭头函数' 风格显然有点不寻常，但是 (a) class Drawing extends React.Component form 也有同样的问题，并且 (b) 我一直被灌输这种无状态/函数式风格现在更适合使用，而且我可以看到它的优点。

我很抱歉写了一篇充满代码示例的长帖子，但我不知道这里什么重要，什么不重要。我不知道如何正确谷歌这个问题，而且我无法真正遵循我头脑中的逻辑，因为我只是陷入“好吧，React 导入，所以......为什么 JSX 不起作用？”

Answer 1

将以下行添加到您的 .babelrc 文件中:

{
  "presets": ["react"]
}

将 JSX 语法转换为原生 JavaScript 需要它。如果您还没有安装 babel React preset，请运行 npm install babel-preset-react。

React import succeeds (which it apparently does) then the JSX should be understood.

React 不用于转换 JSX 语法，它完全由 Babel Syntax JSX 插件完成。而且 React 的库文件中没有使用 JSX，因此导入成功。