これは、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予期しないトークン<このファイルタイプを処理するには、適切なローダーが必要な場合があります。
交換する<People />
と問題React.createElement(People, {})
なく動作します。
私はbabel-preset-react
モジュールを持っています。私はローダーを持っpresets:['react']
ていbabel-loader
ます。私は.babelrc
ファイルを持っています。
webpack / babelが<People />
JSXを解析できないのはなぜですか。
これは私のinclude
道の問題であることが判明しました。私が持っていた:
include: __dirname + '/app'
私は今使っていpath
ます:
include: path.join(__dirname, '/app')
どちらが機能しますか?私はWindowsを使用していますが、それが違いを生むかどうかはわかりません。path
これから普段使い始めると思います。
webpackエラーがのようなものであったら良かったでしょうCan't find include folder/files
。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加