Phản ứng dự kiến ​​sẽ có sẵn trên toàn cầu

Question

Tôi đang chơi với React (@ 13.3) với gói babel và webpack.

Tôi có một thành phần được định nghĩa như thế này:

import BaseComponent from './BaseComponent'; 

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

Nhưng tôi nhận được lỗi sau:

Uncaught ReferenceError: React is not defined

Tôi hiểu các lỗi: bit JSX được biên dịch vào React.createElement(...) nhưng React isn' t trong phạm vi hiện tại vì nó không được nhập.

Câu hỏi của tôi là: Cách sạch sẽ để khắc phục sự cố này là gì? Tôi có phải bằng cách nào đó phơi bày React trên toàn cầu với webpack không?

---

Giải pháp sử dụng:

Tôi đi theo @ salehen-rahman gợi ý.

Trong webpack.config.js tôi:

module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'react-hot!babel?plugins[]=react-require' 
    }, { 
     test: /\.css$/, 
     loader: 'style!css!autoprefixer?browsers=last 2 versions' 
    }] 
}, 

Tôi cũng cần thiết để sửa chữa các xét nghiệm của tôi, vì vậy tôi thêm này vào helper.js file:

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

xét nghiệm của tôi sau đó được tung ra với lệnh sau đây:

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 ?

Thêm babel-plugin-react-require để dự án của bạn, và sau đó sửa đổi Babel cấu hình của webpack của bạn để có các cài đặt tương tự như:

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

Bây giờ, khi bạn đã áp dụng bản cập nhật cấu hình, bạn có thể khởi tạo Phản ứng linh kiện mà không nhập thủ công React.

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

Ghi nhớ mặc dù, babel-plugin-react-require biến đổi mã của bạn để tự động bao gồm Phản ứng nhập khẩu chỉ trong sự hiện diện của thẻ JSX trong một tập tin cụ thể, cho một tập tin cụ thể. Đối với mỗi tệp khác không sử dụng JSX, nhưng cần React vì bất kỳ lý do gì, bạn sẽ phải nhập React theo cách thủ công.

Answer 2

Nếu bạn đã phản ứng trong thư mục modules nút của bạn, bạn có thể thêm import React from 'react'; ở đầu tệp của bạn.

Answer 3

Bạn có thể sử dụng Webpack's ProvidePlugin. Để sử dụng, cập nhật phần plugins trong cấu hình Webpack bạn để bao gồm những điều sau đây:

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

này, tuy nhiên, không giải quyết nó cho các bài kiểm tra ..