带有 babel-loader 的 Webpack 无法识别导入关键字 [英] Webpack with babel-loader not recognizing import keyword
问题描述
我有这个webpack.config.js
:
module.exports = {条目:'./src/admin/client/index.jsx',输出: {文件名:'./src/admin/client/static/js/app.js'},装载机: [{测试:/.jsx?$/,装载机:'巴别塔',排除:/node_modules/,询问: {可选:['运行时']}}],解决: {扩展名:['', '.js', '.jsx']}};
...但我仍然收到此错误:
<前>$ webpack -v哈希:2a9a40224beb025cb433版本:webpack 1.10.5时间:44ms[0] ./src/admin/client/index.jsx 0 字节 [构建] [失败]./src/admin/client/index.jsx 中的错误模块解析失败:/project/src/admin/client/index.jsx Line 1: Unexpected reserved word您可能需要一个合适的加载器来处理这种文件类型.|从反应"导入反应;|从 './components/AdminInterface' 导入 AdminInterface;我有:
- 在全局和本地安装
webpack
- 安装
babel-loader
、babel-core
和babel-runtime
- 全局安装
babel-loader
,以防万一
为什么 webpack 似乎忽略了 babel-loader
?还是 babel-loader
不适用于模块?
更新:
看起来 babel
可以很好地处理输入文件.当我跑步时:
./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
...它按预期输出 ES5.因此,在我看来,webpack
没有正确加载 babel-loader
.
这看起来像是操作员错误的情况.我的 webpack.config.js
结构不正确.具体来说,我需要将加载器详细信息放在 module
部分中:
module.exports = {条目:'./src/admin/client/index.jsx',输出: {文件名:'./src/admin/client/static/js/app.js'},模块: {装载机: [{测试:/.jsx?$/,装载机:'巴别塔',排除:/node_modules/,询问: {可选:['运行时']}}],解决: {扩展名:['', '.js', '.jsx']}}};
I have this webpack.config.js
:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
loaders: [
{
test: /.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
};
...yet I still get this error:
$ webpack -v Hash: 2a9a40224beb025cb433 Version: webpack 1.10.5 Time: 44ms [0] ./src/admin/client/index.jsx 0 bytes [built] [failed] ERROR in ./src/admin/client/index.jsx Module parse failed: /project/src/admin/client/index.jsx Line 1: Unexpected reserved word You may need an appropriate loader to handle this file type. | import React from 'react'; | import AdminInterface from './components/AdminInterface';
I have:
- Installed
webpack
globally and locally - Installed
babel-loader
,babel-core
, andbabel-runtime
- Installed
babel-loader
globally, just in case
Why the hell is webpack seemingly ignoring babel-loader
? Or does babel-loader
not work with modules?
Update:
It looks like babel
handles the input file just fine. When I run:
./node_modules/babel/bin/babel.js ./src/admin/client/index.jsx
...it outputs ES5 as expected. Therefore, it seems to me like somehow webpack
isn't properly loading babel-loader
.
This looks like a case of operator error. My webpack.config.js
structure was not correct. Specifically, I needed to put the loader details inside of a module
section:
module.exports = {
entry: './src/admin/client/index.jsx',
output: {
filename: './src/admin/client/static/js/app.js'
},
module: {
loaders: [
{
test: /.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
optional: ['runtime']
}
}
],
resolve: {
extensions: ['', '.js', '.jsx']
}
}
};
这篇关于带有 babel-loader 的 Webpack 无法识别导入关键字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!