React wird voraussichtlich global verfügbar sein

Question

Ich spiele mit React (@ 13.3) mit babel und webpack.

Ich habe eine Komponente, die wie folgt definiert ist:

import BaseComponent from './BaseComponent'; 

export default class SomeComponent extends BaseComponent { 
    render() { 
     return (
      <div> 
        <img src="http://placekitten.com/g/900/600"/> 
      </div> 
     ); 
    } 
} 

Aber ich erhalte den folgenden Fehler:

Uncaught ReferenceError: React is not defined

Ich verstehe den Fehler: die JSX Bit kompiliert wird in React.createElement(...) aber React isn‘ t im aktuellen Bereich, da es nicht importiert wird.

Meine Fragen ist: Was ist die saubere Möglichkeit, um dieses Problem zu umgehen? Muss ich irgendwie React global mit webpack aussetzen?

---

Lösung verwendet:

Ich folgte @ salehen-Rahman Vorschlag.

In meinem 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' 
    }] 
}, 

Ich musste auch meine Tests beheben, so fügte ich diese in die Datei helper.js:

require('babel-core/register')({ 
    ignore: /node_modules/, 
    plugins: ['react-require'], 
    extensions: ['.js'] 
}); 

sind meine Tests dann gestartet mit dem folgenden Befehl:

mocha --require ./test/helper.js 'test/**/*.js' 

Answer 1

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

hinzufügen babel-plugin-react-require zu einem Projekt, und dann webpack Babel Config ändern Einstellungen zu haben, verwandt:

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

Nun, wenn Sie die Konfiguration Update angewendet haben, können Sie initialisieren Komponenten reagieren, ohne Manuelles Importieren von React.

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

Beachten Sie aber, verwandelt babel-plugin-react-require Code automatisch zu schließen Importe Reagieren nur in Gegenwart von JSX Tag in einer spezifischen Datei, für eine bestimmte Datei. Für jede andere Datei, die JSX nicht verwendet, aber aus irgendeinem Grund React benötigt, müssen Sie React manuell importieren.

Answer 2

Wenn Sie in Ihrem Knoten modules reagieren können Siehinzufügenam Anfang der Datei.

Answer 3

Sie können ProvidePlugin von Webpack verwenden. So verwenden, aktualisieren Sie die Plugins Abschnitt in Ihrem Webpack Config, schließen Folgendes ein:

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

Dies löst jedoch nicht, dass es für die Tests ..