一直在尝试使用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']
}
};
您的加载程序配置为仅转换以以下结尾的文件.jsx
:
test: /\.jsx$/,
(美元符号表示字符串结尾。)
你可以将其更改为
test: /\.jsx?$/,
来改变两者.js
and .jsx
文件,但运行每个 JavaScript 文件node_modules
通过 JSX 加载器可能会相当慢。
我相信你应该能够设置exclude
的选项/node_modules/
然后一个include
您关心的特定模块的选项(react-spin
),但最好的解决方案是包在 JavaScript 的发布版本中不使用 JSX——作者react-spin
可能会接受为此目的的拉取请求。 (编辑:看来已经有一个了,请参阅托马斯博伊特/react-spin#3 https://github.com/thomasboyt/react-spin/pull/3)
最后,react-spin
很小 https://github.com/thomasboyt/react-spin/blob/master/src/main.js,所以你可以考虑在自己的项目中自己实现它(这样你就不必担心 webpack 加载器问题)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)