的WebPack與反應模塊給人意外的標記

一直試圖使用反應旋NPM模塊，但是當我嘗試建立與一的WebPack bundle.js，我收到以下錯誤：的WebPack與反應模塊給人意外的標記

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

我猜該模塊中有jsx，但我不明白爲什麼它不能被構建？構建捆綁包時反應旋轉是否需要一些額外的配置？

這裏是我的全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'] 
    } 
};

來源

2015-07-13 ApathyBear

您的裝載機被配置爲只變換結束.jsx文件：

test: /\.jsx$/,

（美元符號意味着最終）

您可以將其更改爲

test: /\.jsx?$/,

轉換.js和.jsx文件，但通過JSX加載器運行node_modules中的每個JavaScript文件可能會相當慢。

我相信你應該能夠爲我們所關心（react-spin）特定模塊設置的/node_modules/的exclude選項，然後一個include選擇，但最好的解決辦法是，包不是在JavaScript的發行版使用JSX - react-spin的作者可能會對此提出拉取請求。（編輯：它似乎已經有一個，見thomasboyt/react-spin#3）

最後，react-spinis very small，讓你的男人認爲自己在自己的項目實現它（這樣你就不必擔心的WebPack裝載機問題）。

來源

2015-07-13 03:19:00

謝謝，你提出了一個很好的觀點。我最終在自己的項目中包含了自己的反應。 – ApathyBear

的WebPack與反應模塊給人意外的標記

回答

相關問題