反应预计将在全球范围内提供

我正在玩与巴贝尔和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> 
     ); 
    } 
}

，但我得到了以下错误：

Uncaught ReferenceError: React is not defined

我理解的错误：JSX位被编译成React.createElement(...)但React ISN”因为它没有被导入，所以在当前范围内。

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

解决方案：

我跟着@ salehen拉赫曼建议。

在我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'

来源

2015-09-13 kombucha

你试过'进口从阵营“反应” ;'？ –

导入React应该位于BaseComponent中。 –

@JanakaStevens没关系。上面的代码仍然不能运行，考虑React是不是手动导入的，或者没有任何涉及到会自动导入React的变换器。 –

My questions is : What's the clean way to work around this issue ? Do I have to somehow expose React globally with webpack ?

添加babel-plugin-react-require到您的项目，然后修改你的WebPack的巴贝尔配置不得不设置类似于：现在

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

，一旦应用了配置更新，可以初始化反应的组分不手动导入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。

来源

2015-09-14 02:40:16

对我来说，我在原文中增加了一些指针。谢谢！ – kombucha

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

来源

2015-09-13 19:37:49 walkerrandophsmith

我可以做到这一点，但感觉奇怪的是有一个实际上并未使用的导入。好吧，但不是直接由我：/。 – kombucha

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

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

然而，这并不能解决问题进行了检测..

来源

2016-10-06 10:12:16

反应预计将在全球范围内提供

回答

相关问题