私はこの構成を持っています
package.json
{
"name": "app02",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"react": "^0.14.3"
},
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"private": true
}
webpack.config.js
module.exports = {
entry: "./src/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['react', 'es2015']
}
}
]
}
}
src/main.js
import React from 'react';
import Greenting from './components/greeting';
React.render(
<Greeting name="World" />,
document.getElementById('content')
);
src/components/greeting.js
import React from 'react';
export default React.createClass({
render: function(){
return (
<div className="greeting">
Hello, {this.props.name}!
</div>
)
}
})
ターミナルでwebpack
コマンドを実行するときの問題
⇒ webpack
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.12.6
Time: 722ms
+ 1 hidden modules
ERROR in ./src/main.js
Module build failed: ReferenceError: [BABEL] ~/app02/src/main.js: Unknown option: ~/app02/node_modules/react/react.js.Children
at Logger.error (~/app02/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
at OptionManager.mergeOptions (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:262:18)
at OptionManager.mergePresets (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:325:16)
at OptionManager.mergeOptions (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:287:12)
at OptionManager.init (~/app02/node_modules/babel-core/lib/transformation/file/options/option-manager.js:416:10)
at File.initOptions (~/app02/node_modules/babel-core/lib/transformation/file/index.js:190:75)
at new File (~/app02/node_modules/babel-core/lib/transformation/file/index.js:121:22)
at Pipeline.transform (~/app02/node_modules/babel-core/lib/transformation/pipeline.js:42:16)
at transpile (~/app02/node_modules/babel-loader/index.js:14:22)
at Object.module.exports (~/app02/node_modules/babel-loader/index.js:87:14)
BabelにはReact用の個別のプリセットがあります。 http://babeljs.io/docs/plugins/preset-react/ を参照してください
これをインストールするには、次のコマンドを実行します(これにより、package.jsonのノードモジュールとdevDependenciesに追加されます)。
npm install --save-dev babel-preset-react