的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与反应模块给人意外的标记

回答

相关问题