我是Webpack新手并遇到this tutorial之后的问题。
似乎webpack.config.js没有正确设置babel-loader
,但我不确定。在控制台中我看到以下错误:
bundle.js:49 Uncaught SyntaxError: Unexpected token import
指的是import sortBy from 'lodash/collection/sortBy';
的{{1}}行。所以我认为它是一个babel转换问题(不允许ES6的index.js
语法?)
以下是完整的import
文件
index.js
import sortBy from 'lodash/collection/sortBy';
import {users} from './users';
import {User} from './User';
sortBy(users, 'name')
.map(user => {
return new User(user.name, user.age);
})
.forEach(user => {
console.log(user.display);
});
看起来像这样:
webpack.config.js
我已经搜索了与问题相关的其他问题here和here以及Google搜索但未找到解决方案或原因我为#&# 39;我还得错误。也许教程已经过时。如何解决这个问题的任何指导将非常感谢!
更新
按照Alexandre Thebaldi在下面发布的答案中列出的步骤解决了特定的babel加载错误。
然而,发生了新的错误 -
module.exports = {
entry: './src/index.js',
output: {
path: './public/',
filename: 'bundle.js'
},
devServer: {
contentBase: './public/'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel'}
]
}
}
如果您正在使用this tutorial并遇到此错误,则很可能是由Module not found: Error: Cannot resolve module 'lodash/collection/sortBy'
中的错误路径引起的,特别是index.js
目录似乎已不再存在存在。我设法通过简单地将路径更改为lodash/collections
来解决第二个错误。
注意
请务必首先检查lodash/sortBy
中是否安装了lodash
,并在更改前确定路径是否正确。
答案 0 :(得分:21)
首先,确保使用以下方法安装了babel核心和加载程序:
$ npm install --save-dev babel-loader babel-core
所以正确的加载器是babel-loader
而不是babel
。配置应该是:
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
]
}
实际上你需要告诉babel转换你的代码。
Pre-6.x,Babel默认启用了某些转换。但是,Babel 6.x不附带任何启用的转换。您需要明确告诉它要运行什么转换。最简单的方法是使用预设,例如ES2015预设。您可以使用。
进行安装
$ npm install babel-preset-es2015 --save-dev
预设安装后,您必须启用它。
在项目根目录中创建
.babelrc
配置并启用一些插件。假设您已安装ES2015预设,以启用它 你必须在你的
.babelrc
文件中定义它,如下所示:
{
"presets": ["es2015"]
}
Babel Setup页面中的详细信息。
答案 1 :(得分:2)
Mikeym
这是babel-loader和ES6的问题。
您可以将webpack.config.js更改为:
module.exports = {
entry: './src/index.js',
output: {
path: './public/',
filename: 'bundle.js'
},
devServer: {
contentBase: './public/'
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: 'babel?presets[]=es2015' }
]
}
}