我开始通过教程学习反应。但是webpack没有按预期工作。
webpack
这是我的简单webpack.conf.js文件。
webpack.conf.js
module.exports = { entry: "./app-client.js", output: { filename: "public/bundle.js" }, module: { loaders: [ { exclude: /(node_modules|app-server.js)/, loader: 'babel' } ] } };
我还安装了所有模块:
npm install -g webpack npm install webpack react babel-loader babel-core
但是在运行时webpack,出现以下错误消息:
ERROR in ./app-client.js Module build failed: SyntaxError: app-client.js: Unexpected token (4:13) 2 | var APP = require('./components/APP'); 3 | > 4 | React.render(<APP />, document.getElementById('react-container')); | ^
以我的理解,babel-loader应该照顾好这一点。但是看起来好像没有付出努力。
babel-loader
我想念什么?
Babel 6本身不会做任何事情。为了正确处理JSX,您需要在.babelrc文件中包含以下内容:
.babelrc
{ "presets": ["react"] }
另外,您需要确保使用NPM安装该预设:
$ npm install --save-dev babel-core react react-dom babel-preset-react
一个不错的起点是官方的React 入门页面