Webpack với phản ứng module cho bất ngờ thẻ

Question

Được cố gắng sử dụng các mô-đun NPM phản ứng-quay, nhưng khi tôi cố gắng và xây dựng một bundle.js với webpack, tôi nhận được lỗi sau:

Module parse failed: /Users/nir/browsewidget/node_modules/react-spin/src/main.js Line 29: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| render: function() { 
|  return (
|  <span ref="container" /> 
| ); 
| } 
@ ./js/widget.jsx 4:14-35 

Tôi đoán rằng mô-đun này có jsx trong đó, nhưng tôi không hiểu tại sao nó không thể được xây dựng? Phản ứng spin có cần thêm một số cấu hình khi xây dựng một gói không?

Dưới đây là đầy đủ của tôi webpack.config.js:

module.exports = { 
    entry: "./js/widget.jsx", 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { 
        test: /\.jsx$/, 
        loader: 'jsx-loader?insertPragma=React.DOM&harmony' 
      } 
     ] 
    }, 
    externals: { 
     //don't bundle the 'react' npm package with our bundle.js 
     //but get it from a global 'React' variable 
     'react': 'React' 
    }, 
    resolve: { 
     extensions: ['','.js','.jsx'] 
    } 
}; 

Answer 1

loader của bạn được cấu hình để chỉ chuyển đổi file kết thúc bằng .jsx:

test: /\.jsx$/, 

(Các ký hiệu đô la có nghĩa thúc- of-string.)

Bạn có thể thay đổi thành

test: /\.jsx?$/, 

để chuyển đổi cả hai tệp .js và .jsx, nhưng chạy mọi tệp JavaScript trong node_modules thông qua trình tải JSX có thể sẽ khá chậm.

Tôi tin rằng bạn sẽ có thể thiết lập một tùy chọn exclude của /node_modules/ và sau đó là một lựa chọn include cho module cụ thể mà bạn quan tâm (react-spin), nhưng giải pháp tốt nhất là gói không sử dụng JSX trong phiên bản xuất bản của JavaScript - tác giả của react-spin có thể mở để yêu cầu kéo về hiệu ứng này. (Edit: nó xuất hiện ở đó đã là một, xem thomasboyt/react-spin#3)

Cuối cùng, react-spinis very small, vì vậy bạn người đàn ông xem xét thực hiện điều đó cho mình trong dự án của riêng bạn (vì vậy mà bạn không cần phải lo lắng về các vấn đề webpack loader).