React有望在全球范围内提供

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由于未导入而不在当前范围内。

我的问题是：解决此问题的干净方法是什么？我是否必须以某种方式React在全球范围内公开使用webpack？

使用的解决方案：

我遵循@ 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

我的问题是：解决此问题的干净方法是什么？我是否必须通过Webpack在全球范围内公开React？

添加babel-plugin-react-require到您的项目，然后修改webpack的Babel配置，使其具有类似于以下内容的设置：

loaders: [
  {
    test: /.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      stage: 0,
      optional: ['runtime'],
      plugins: [
        'react-require' // <-- THIS IS YOUR AMENDMENT
      ]
    },
  }
]

现在，一旦您应用了配置更新，就可以初始化React组件而无需手动导入React。

React.render(
  <div>Yippee! No <code>import React</code>!</div>,
  document.body // <-- Only for demonstration! Do not use document.body!
);

请记住，虽然，babel-plugin-react-require将你的代码，包括自动进口作出反应 只 在JSX标签的存在 特定的 文件，
对于 一个特定的文件。对于其他任何不使用JSX但出于任何原因都需要React的文件，您都必须手动导入React。