带有反应模块的 Webpack 给出了意外的令牌
Webpack with react modules giving unexpected token
一直在尝试使用 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 在构建 bundle 时是否需要一些额外的配置?
这是我的全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
和 .jsx
文件,但是 运行 node_modules
中的每个 JavaScript 文件通过 JSX 加载器可能会相当慢。
我相信您应该能够设置 /node_modules/
的 exclude
选项,然后为您关心的特定模块 (react-spin
) 设置 include
选项,但最好的解决方案是包在 JavaScript 的已发布版本中不使用 JSX——react-spin
的作者可能会接受 pull request 为此目的。 (编辑:好像已经有一个了,见 thomasboyt/react-spin#3)
最后,react-spin
is very small,大家可以考虑在自己的项目中自己实现(这样就不用担心webpack loader的问题了)
一直在尝试使用 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 在构建 bundle 时是否需要一些额外的配置?
这是我的全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
和 .jsx
文件,但是 运行 node_modules
中的每个 JavaScript 文件通过 JSX 加载器可能会相当慢。
我相信您应该能够设置 /node_modules/
的 exclude
选项,然后为您关心的特定模块 (react-spin
) 设置 include
选项,但最好的解决方案是包在 JavaScript 的已发布版本中不使用 JSX——react-spin
的作者可能会接受 pull request 为此目的。 (编辑:好像已经有一个了,见 thomasboyt/react-spin#3)
最后,react-spin
is very small,大家可以考虑在自己的项目中自己实现(这样就不用担心webpack loader的问题了)