带有 babel-loader 的 Webpack 无法识别 import 关键字
Webpack with babel-loader not recognizing import keyword
我有这个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']
}
};
...但我仍然收到此错误:
$ 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';
我有:
- 全局和本地安装
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 = {
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']
}
}
};
我通过包含 es2015 和 react presets 然后添加解决了同样的问题他们到 webpack.config.js 文件。
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
如本 post 中所述:https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
我的完整 webpack.config.js 文件:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
你的babel是什么版本的?如果babel版本是6+以上,你需要像这样识别预设'es2015'和'react'
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
不要忘记安装这些模块:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
我有这个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']
}
};
...但我仍然收到此错误:
$ 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';
我有:
- 全局和本地安装
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 = {
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']
}
}
};
我通过包含 es2015 和 react presets 然后添加解决了同样的问题他们到 webpack.config.js 文件。
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-react
如本 post 中所述:https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
我的完整 webpack.config.js 文件:
module.exports = {
context: __dirname + "/src",
entry: './main',
output: {
path: __dirname + "/build",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
],
resolve: {
extensions: ['.js', '.jsx']
}
}
};
你的babel是什么版本的?如果babel版本是6+以上,你需要像这样识别预设'es2015'和'react'
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel', // 'babel-loader' is also a legal name to reference
query: {
presets: ['react', 'es2015']
}
}
]
}
不要忘记安装这些模块:
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev