Question

我和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>
        );
    }
}

但是我收到以下错误：

未捕获的ReferenceError：未定义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'

Answer 1

如果您对节点模块目录有反应，可以在文件顶部添加import React from 'react';。

Answer 2

您可以使用Webpack的ProvidePlugin。要使用，请更新Webpack配置中的插件部分以包含以下内容：

plugins: [
  new webpack.ProvidePlugin({
    'React': 'react'
  })
]

然而，这并没有为测试解决这个问题。

React预计将在全球范围内提供

2 个答案: