我正在使用babel和webpack玩React(@13.3)。
我有一个组件,定义如下:
import BaseComponent from './BaseComponent';
export default class SomeComponent extends BaseComponent {
render() {
return (
<div>
<img src="http://placekitten.com/g/900/600"/>
</div>
);
}
}
但是我遇到了以下错误:
未捕获的引用错误:React 未定义
我理解这个错误:JSX 部分被编译成 React.createElement(...)
,但由于没有导入,因此 React
不在当前范围内。
我的问题是:
如何清晰地解决这个问题?我是否需要通过 webpack 在全局范围内公开 React
?
使用的解决方案为:
我遵循了 @salehen-rahman 的建议。
在我的 webpack.config.js 中:
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'react-hot!babel?plugins[]=react-require'
}, {
test: /\.css$/,
loader: 'style!css!autoprefixer?browsers=last 2 versions'
}]
},
我还需要修复我的测试,因此我将以下内容添加到helper.js文件中:
require('babel-core/register')({
ignore: /node_modules/,
plugins: ['react-require'],
extensions: ['.js']
});
我使用以下命令启动我的测试:
mocha --require ./test/helper.js 'test/**/*.js'
import React from 'react';
吗? - Casey Foster