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

但是我遇到了以下错误：

未捕获的引用错误：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'

- kombucha

---

你尝试过使用 import React from 'react'; 吗？ - Casey Foster

应该将 import React 放在 BaseComponent 中。 - J. Mark Stevens

@JanakaStevens 这并不重要。考虑到React没有手动导入，或者没有任何转换器自动导入React，上述代码仍然不应该运行。 - Sal Rahman

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 标签时自动将 React 引入。对于其他不使用 JSX 但需要 React 的文件，您需要手动导入 React。

- Sal Rahman

---

没问题，我在原帖中添加了更多的指针。谢谢！ - kombucha

Answer 2

如果你的node modules目录中有React，你可以在文件顶部添加import React from 'react';。

（说明：该段文字是关于在使用React时如何引入React库的简单指导）

- walkerrandophsmith

---

我可以这样做，但是导入一个实际上并没有被我直接使用的模块感觉有些奇怪 :/。 - kombucha

Answer 3

你可以使用Webpack的ProvidePlugin。要使用它，需要在Webpack配置文件中更新插件部分，包含以下内容：

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

然而，这并不能解决测试的问题。

- Koen.