Webpack mit reagieren Module unerwartet geben Token

Question

versucht, die reagieren Spin npm Modul zu verwenden, aber wenn ich einen bundle.js mit webpack versuchen und bauen, erhalte ich folgende Fehlermeldung:

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 

ich raten bin dass dieses Modul jsx enthält, aber ich verstehe nicht, warum es nicht gebaut werden kann? Benötigt react-spin beim Aufbau eines Bundles eine zusätzliche Konfiguration?

Hier ist meine volle 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

Ihr Loader nur so konfiguriert ist, Dateien zu umwandeln, die in .jsx Ende:

test: /\.jsx$/, 

(Das Dollarzeichen bedeutet Ende- of-string.)

Sie könnten es in

ändern

test: /\.jsx?$/, 

beide .js und .jsx Dateien zu verwandeln, aber wird wahrscheinlich ziemlich langsam jede JavaScript-Datei in node_modules durch die JSX Lader läuft.

Ich glaube, Sie sollten für die spezifischen Modul Sie (react-spin) Pflege setzen eine exclude Möglichkeit /node_modules/ und dann eine include Option der Lage sein, aber die beste Lösung ist, dass Pakete nicht JSX verwenden in der veröffentlichten Version der JavaScript -Der Autor von react-spin könnte für eine Pull-Anforderung zu diesem Zweck offen sein. (Edit: es scheint, gibt es bereits ein, siehe thomasboyt/react-spin#3)

Schließlich react-spinis very small, so dass Sie Menschen betrachten es sich in Ihrem eigenen Projektdurchführung (so dass Sie nicht über die webpack loader Probleme zu kümmern).