React ma być dostępny na całym świecie.

Question

Gram z Reactem (@ 13.3) z babel i pakietem internetowym.

Mam składnik, który jest zdefiniowany następująco:

import BaseComponent from './BaseComponent'; 

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

Ale pojawia się następujący błąd:

Uncaught ReferenceError: React is not defined

Rozumiem błąd: bit JSX jest kompilowany do React.createElement(...) ale React ISN” t w bieżącym zakresie, ponieważ nie został zaimportowany.

Moje pytania są następujące: Jaki jest czysty sposób obejścia tego problemu? Czy muszę w jakiś sposób narazić się na globalną prezentację za pomocą pakietu internetowego?

---

roztworu stosowanego:

I po @ salehen Rahman propozycję.

W moich 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' 
    }] 
}, 

Musiałem także naprawić moich testów, więc dodałem to do helper.js plików:

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

moich testów są następnie uruchamiane za pomocą następującego polecenia:

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 ?

Dodaj babel-plugin-react-require do projektu, a następnie zmianę Twojego WebPACK Babel config mieć ustawienia zbliżona do:

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

Teraz, gdy już zastosowano aktualizację konfiguracji, można zainicjować React komponentów bez ręcznie importuj React.

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

pamiętać jednak, babel-plugin-react-require przekształca swój kod do automatycznego importu obejmują reagują tylko w obecności tagu JSX w konkretnego pliku dla konkretnego pliku. Dla każdego innego pliku, który nie używa JSX, ale wymaga Reagowania z dowolnego powodu, będziesz musiał ręcznie zaimportować React.

Answer 2

Jeśli zareagowałeś w katalogu modułów węzłów, możesz dodać import React from 'react'; u góry pliku.

Answer 3

Możesz użyć pakietu Webpack: ProvidePlugin. Aby go wykorzystać, zaktualizować sekcję wtyczek w Twojej config WebPACK zawierać następujące elementy:

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

To jednak nie rozwiązuje go do testów ..