问题描述
这是我使用ExpressJS所拥有的:
This is what I have, using 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
/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
/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时,我得到:
When I run webpack I get:
当我将<People />
替换为React.createElement(People, {})
时,效果很好.
When I replace <People />
with React.createElement(People, {})
it works just fine.
我有babel-preset-react
模块.我有presets:['react']
和babel-loader
加载器.我有.babelrc
文件.
I have the babel-preset-react
module. I have presets:['react']
with the babel-loader
loader. I have the .babelrc
file.
为什么webpack/babel无法解析<People />
JSX ..?
Why can webpack/babel not parse the <People />
JSX..?
推荐答案
事实证明这是我的include
路径存在的问题.我有:
This turned out to be an issue with my include
path. I had:
include: __dirname + '/app'
我现在正在使用path
:
include: path.join(__dirname, '/app')
哪个有效!我在Windows上,不知道这有什么不同.想想我将从现在开始例行使用path
.
Which works! I'm on Windows, don't know if that makes a difference. Think I'll start using path
routinely from now on.
将Webpack错误归类为Can't find include folder/files
会很好.
Would've been nice for the webpack error to be something like Can't find include folder/files
.
这篇关于Webpack,React,JSX,Babel-意外令牌<的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!