Question

尝试使用react-spin npm模块，但是当我尝试使用webpack构建bundle.js时，我收到以下错误：

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，但我不明白它为什么不能构建？在构建捆绑包时，react-spin是否需要一些额外的配置？

这是我的完整 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

您的加载程序配置为仅转换以.jsx结尾的文件：

 test: /\.jsx$/,

（美元符号表示字符串结尾。）

您可以将其更改为

test: /\.jsx?$/,

转换.js和.jsx文件，但通过JSX加载程序在node_modules中运行每个JavaScript文件可能会相当慢。

我相信您应该能够为exclude设置/node_modules/选项，然后为您关注的特定模块设置include选项（react-spin），但是最好的解决方案是在发布的JavaScript版本中不使用JSX的程序包 - react-spin的作者可能会对这种效果的拉取请求开放。（编辑：它似乎已经存在，请参阅thomasboyt/react-spin#3）

最后，react-spin is very small，所以你可以考虑在自己的项目中自己实现它（这样你就不必担心webpack加载器问题了。）

具有反应模块的Webpack提供意外令牌

1 个答案: