Question

这就是我所拥有的，使用ExpressJS：

|-- app
|   |-- index.js
|-- node_modules
|   |-- babel-core
|   |-- babel-loader
|   |-- babel-preset-react
|   |-- express
|   |-- react
|   |-- react-dom
|   |-- webpack
|-- public
|   |-- js
|   |   |-- app.js
|   |-- index.html
|-- .babelrc
|-- index.js
|-- package.json
|-- webpack.config.js

/webpack.config.js

module.exports = {
    entry: [
        './app/index.js'
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            include: __dirname + '/app',
            loader: "babel-loader",
            query: {
                presets:['react']
            }
        }]
    },
    output: {
        filename: "app.js",
        path: __dirname + '/public/js'
    }
};

/app/index.js

var React = require("react");
var ReactDOM = require("react-dom");
var People = React.createClass({
    ...
});
ReactDOM.render(<People />, document.getElementById('app'));

/。babelrc

{
  "presets": [
    "react"
  ]
}

当我运行webpack时，我得到：

模块解析失败：/app/index.js意外的令牌＆lt; 您可能需要适当的加载程序来处理此文件类型。

当我将<People />替换为React.createElement(People, {})时，它的工作正常。

我有babel-preset-react模块。我presets:['react']加载babel-loader。我有.babelrc文件。

为什么webpack / babel不能解析<People /> JSX ..？

Answer 1

这对我的include路径来说是一个问题。我有：

include: __dirname + '/app'

我现在正在使用path：

include: path.join(__dirname, '/app')

哪个有效！我在Windows上，不知道这是否有所作为。我想从现在开始我会定期开始使用path。

对于webpack错误来说，Can't find include folder/files就好了。

Webpack，React，JSX，Babel - 意外的令牌＆lt;

1 个答案: